I want 2 <div> elements to be positioned side by side.
They are contained within another <div> element with 100% width spacing.
If I use relative positioning the second div element ends up below the first. Is there a way to position them side by side without positioning the absolutely.
Thanks,
Scott
NogDog
06-06-2007, 04:07 PM
Usually I would make both of them float left, then stick a zero-height element after them with clear:both so that the container div wraps all the way down.
scottpoliseno
06-06-2007, 04:54 PM
NogDog... Thanks! I hate to be a pain but could you show the CSS?
NogDog
06-06-2007, 06:18 PM
When using percentages, you usually have to play around a bit to get things to look the same in both IE and FF, but this seems to work pretty well in both:
Maybe I missed something but why not just put the divs in a table.
<table>
<tr>
<td>
<div>
left div content here
</div>
</td>
<td>
<div>
right div content here
</div>
</td>
</tr>
</table>
I think this would allow you better control of the postions of those divs between the different browsers.
Of course I may not have the whole picture of what you need but thought I would throw this out there anyway.
NogDog
06-07-2007, 05:20 PM
One reason not to use tables is that, per the W3C HTML 4.01 specifcation, Tables in HTML documents (http://www.w3.org/TR/html4/struct/tables.html#h-11.1):
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
For some more good reasons: http://www.hotdesign.com/seybold/
Edit: the above is assuming that we are not dealing with actual tabular data here. If this assumption is incorrect, then by all means use a table for the tablular data if that makes sense in this context.
shaneH
06-07-2007, 09:03 PM
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.
Yea if it's "non-visual" yea you have to use a div or the space would be used up and just blank. But I can not think of a reason one would need "2 <div> elements to be positioned side by side" if they are not going to be seen (non-visual). Positioning is all about the visual, you want it to look and work good for the user.
Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display.
Well a good site designer will make sure that doesn't happen (ie. properly sized images). The only time I can think that this may occure is if the site has visitors uploading pics. And if that is the case one of 3 thing has to be done; either you have to resize them when uploading, make the box the image is in scroll or leave it so the page can be scrolled. Of those, the first two are a little more difficult.
To minimize these problems, authors should use style sheets to control layout rather than tables.
Hey, I for one am all for that to work. But in the real world, each browser seems to have a different way of handling position, padding, borders, and margins.
Tables just solve 90% of the positioning nightmares that all the browser have created. For the other 10% of the time, all I can say is, yea right good luck, might want to find a different way to do that. A div that is solely dependent on a css or styles is a mess just waiting for the next browser or browser version to be released.
I started out using tables back before CSS. And then when W3C relased there standards I though great an easier way to do it. Then I found I had write out script that identified each browser and browser version and then for each of those I had to write completely separate pages. I got tired of having to do 3 and 4 times the amout of work and went back to tables combined with css, and I have only had a couple cases were I had to code differently based on the browser, since.
Now both of our code examples above will work but yours will end up longer. With yours, you may also end up needing code to determine which browser is being used. And then for those browsers that display it different, than you intended, you will have to write all that out for each one. This makes your example at least 3 times longer than what you have. Where as mine will work fine in all W3C compliant browsers.
Two saying's come to mind, "K.I.S.S." (Keep It Simple Stupid) and "If ain't broke don't fix it" (or as for browsers "since the one is broke don't use it to fix the one that isn't broke").
NogDog
06-07-2007, 10:04 PM
Did you read the http://www.hotdesign.com/seybold/ link?
The big gain with a well-executed HTML mark-up and CSS-driven presentation is when you want to change the way the page is laid out: especially when you want to make the same change across many/all pages of a site. See this little example I just whipped up, where the HTML never changes, just the style sheet that is linked in: http://www.charles-reace.com/test/css/index.php
Also, once a user accesses a page that uses a given style sheet, that style sheet is cached and only the HTML has to be downloaded, whereas a tabular layout requires that all the table markup has to be downloaded each time, plus with complex tablular layouts (especially those with nested tables) the rendering time can be slower.
Lastly, using CSS instead of tables for visual presentation allows you to optimize the HTML structure for search engine ranking, e.g.: sticking site navigation at the end of the file then using absolute positioning to place it above the main content (that you'd really prefer the search engines to read first).
bpat1434
06-08-2007, 09:05 AM
I started out using tables back before CSS. And then when W3C relased there standards I though great an easier way to do it. Then I found I had write out script that identified each browser and browser version and then for each of those I had to write completely separate pages. I got tired of having to do 3 and 4 times the amout of work and went back to tables combined with css, and I have only had a couple cases were I had to code differently based on the browser, since.
Now both of our code examples above will work but yours will end up longer. With yours, you may also end up needing code to determine which browser is being used. And then for those browsers that display it different, than you intended, you will have to write all that out for each one. This makes your example at least 3 times longer than what you have. Where as mine will work fine in all W3C compliant browsers.
I'd just like to chime in and say that's completely misconceived. It doesn't make your work 3 times as long. The only issues between browsers are typically padding, margin, and widths (percents). But since you're using CSS, you more than likely should be using "em" as your measure of width / padding / margin. This way, when a user who needs to "zoom in" on your text won't have a broken site to be viewed, but will see a huge text version of your site.
Not to mention that you don't have to recopy the entire stylesheet. If you did that, you made work for yourself. Once the stylesheet is made, you can include a smaller (margin and padding only) stylesheet for IE, Opera, Maxthon, Firefox or whatever. And when you do this, you should be looking at exactly what elements look "wrong" and fix them only. Which when dealing with a good site, will usually be one fix (typically a float).
I've done my share of CSS, XHTML, HTML coding. I remember when tables were the way to go. But I always had the issue of creating an awesome layout, porting it to a table, and then having some content go overboard and breaking the look of the site. Totally couldn't stand it.
I say this not to put you down, but to point out that you're not making 3 times the work. You're just making work for yourself (which you'd have to do anyway). And if done properly in the first place, it's not that much more work than you've already done.
cgraz
06-08-2007, 05:37 PM
Shane: Your post has no styling whatsoever. What happens when you need fonts, background colors, valigns, borders/cellspacing, etc? You have to include that information in each cell. What if the number of cells grows? You're copying and pasting all that additional formatting that could be kept in a separate css file and keep the design elements separate from the code to lay it out.
Your code would look more like this after some minor formatting<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="300" valign="top" background="#FFFFFF">
<div><font style="11px tahoma, arial, sans-serif #333;">left div content here</font></div>
</td>
<td width="300" valign="top" background="F7F7F7">
<div><font style="11px tahoma, arial, sans-serif #333;">right div content here</font></div>
</td>
</tr>
</table>whereas CSS style would look like this:<div id="container">
<div class="left alt1">Left div content goes here.</div>
<div class="right alt2">Right div content goes here.</div>
<div class="clear"></div>
</div>And as this grows, the code stays light (and readable).
If you need to change the font size on your site, you only do it in one place with CSS; your code would require changing potentially hundreds of files.
A great example: http://csszengarden.com/
Look at the page source. The source never changes, but as you click on different designs in the right column, you have an entirely different site. The code is light, easy to read, and search engines have less junk to sift through. So you get a higher keyword/content to code ratio.
JPnyc
06-08-2007, 06:04 PM
display:inline; float;left; Then for the parent div, white-space:nowrap;
dougal85
06-08-2007, 09:48 PM
ugh, I hate tables - so hard to read/maintain. DIV's are easier when you know how.
Thats pretty much all I've got to add :P
JPnyc
06-08-2007, 11:48 PM
Tables aren't even as bad as their normal deployment makes them. If more people knew how to make use of colspan and rowspan, pages could've been positioned with a single table in many cases, instead of the nested upon nested tables that one often sees in older pages
Weedpacket
06-09-2007, 04:47 AM
But in the real world, each browser seems to have a different way of handling position, padding, borders, and margins. Yes, it's "IE" and "everyone else". Oh, and googlebot renders it differently, too (specifically, non-visually, but who cares about non-visual representations of the page anyway?).
JPnyc
06-09-2007, 12:52 PM
Much of the time yes, but not always. Sometimes it's IE and Opera that agree and Gecko is the odd man out.
Weedpacket
06-10-2007, 04:28 AM
True; but the vast majority of the time it's less grief to develop for Gecko or Opera and then whatever hacks are necessary to get things to work on IE6/7/Mac than the other way around. In fact the only time I've had trouble with Opera (when Firefox was used during the page layout process) was its bug in failing to load images that were styled as display:none. I should revisit that issue because it was a couple of builds ago, now.
JPnyc
06-10-2007, 10:07 AM
Most developers say that, however I disagree. Well, I disagree with one proviso: if you developer for the other browsers bearing in mind what commands IE6 does not understand, then it'll work fine. Me, I develop on IE6 in standards compliant mode, and adjust for the others, and I rarely have problems.
Weedpacket
06-10-2007, 05:57 PM
It's possible that I'm not being quite fair; the more I think about my process the more I realise that I do quite a bit more than "just write a stylesheet and look at the output in my browser of choice"; there are a number of ancillary doodads that I use to fiddle with the page while I'm looking at it that aren't strictly part of Firefox. That means I can take a more approximate-and-refine approach than I would want to if each iteration involved more back-and-forth between applications (instead, it would be "try and do everything at once and then swear have to figure out what broke when it does"). So it might be a workflow and perception thing.
But I note the phrase "standards compliant" - that is of course a must.
JPnyc
06-10-2007, 09:03 PM
I realize I'm a total primitive when it comes to this stuff, but I just use notepad and 3 browsers, IE6, FF2.0, and Opera 9. But I do the initial checking and work in maxthon, an IE shell. That's my main browser.
Weedpacket
06-11-2007, 04:58 AM
Hey, I'm the reactionary codger around here. My text editor of choice was built in 1999.
shaneH
06-20-2007, 04:21 AM
My text editor of choice was built in 1999.
LOL
You aren't the only one. I have a newer one just haven't really had a good reason to switch to it.
Wow, I guess my posts got some discussion going.
I'm not going to go into length about all the replies. I will say that some of you missunderstood what I was saying and made several assumssions about how I was suggesting one could do what was originally asked about.
guest
01-06-2008, 10:08 AM
Hi, I'm trying to make a videogame character profile page... hoping to get one on the left and one on the right and have that continue to the bottom of the page like this:
1 2
3 4
5 6
etc.
but am doing something wrong because they overlap instead of breaking to a new line each time:
<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=left>
<P><B>Character 1</B>, soldier.</P>
<P><IMG SRC="images/character1.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 1 (<B>Character 1
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=right>
<P><B>Character 2</B>, soldier.</P>
<P><IMG SRC="images/character2.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 2 (<B>Character 2
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
<BR>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=left>
<P><B>Character 3</B>, soldier.</P>
<P><IMG SRC="images/character3.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 3 (<B>Character 3
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=right>
<P><B>Character 4</B>, soldier.</P>
<P><IMG SRC="images/character4.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 4 (<B>Character 4
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
</CENTER>
help?
guest
01-06-2008, 11:14 AM
Nevermind... played with the html a bit and got it working:
<CENTER>
<TABLE BORDER="1" WIDTH="500">
<TR>
<TD WIDTH=250>
<TABLE BORDER="1" WIDTH="250">
<TR>
<TD>
<P><B>Character 1</B>, soldier.</P>
<P><IMG SRC="images/character1.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 1 (<B>Character 1
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="250">
<TABLE BORDER="1">
<TR>
<TD WIDTH="250">
<P><B>Character 2</B>, soldier.</P>
<P><IMG SRC="images/character2.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 2 (<B>Character 2
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
<BR>
<CENTER>
<TABLE BORDER="1" WIDTH="500">
<TR>
<TD WIDTH=250>
<TABLE BORDER="1" WIDTH="250">
<TR>
<TD>
<P><B>Character 3</B>, soldier.</P>
<P><IMG SRC="images/character3.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 3 (<B>Character 3
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="250">
<TABLE BORDER="1">
<TR>
<TD WIDTH="250">
<P><B>Character 4</B>, soldier.</P>
<P><IMG SRC="images/character4.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 4 (<B>Character 4
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
<BR>
bradgrafelman
01-06-2008, 02:46 PM
Speaking of playing with the HTML, make sure you play around with this toy: http://validator.w3.org.
WhatsHisFace
09-22-2009, 07:02 AM
ugh, I hate tables - so hard to read/maintain. DIV's are easier when you know how.
Thats pretty much all I've got to add :P
I hope I don't provoke anyone if I end up bumping an old thread. I doubt that I'll get back to this forum again, but,
I've been using tables for years and I find tables a lot easier to read and maintain as layers doesnt make any sense at all. If more people learn how to use colspan cellpadding and cellspacing this wouldn't have been an issue and the majority would use tables instead. Tables are by far the easiest way of setting up a layout and implementing new layout to old.
So far, I'm stuck on this very same problem, on how to make layers stack next to eachother, but so far there's not been one single answer or explenation on how to do it, seem it being too difficult for people to manage and even read.
Once I use the float command on one layer, I have to add layers to EVERYTHING (e.g. add layers around my tables) or else my entire layout turns into a big steamy pile of poo. To be all honest, whenever I see a layer, or any of my colleges use a layer I run through the code and remake it to tables.
There is so much more useful one can do with tables simply because tables have been here the longest.
Much props to oldschool webdesigners who still use tables!
WhatsHisFace
09-22-2009, 07:03 AM
And props to those who doesn't use <p>
PHP Builder
Copyright WebMediaBrands Inc. All Rights Reserved.