Two DIV elements aligning side by side...

NogDog · Jun 6, 2007

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
}
#container {
   margin: 1%;
   padding: 0;
   width: 97%;
   background-color: #fc9;
}
#left, #right {
   float: left;
   width: 46.5%;
   margin: 1% 0 1% 1%;
   padding: 1%;
   background-color: #9cf;
   color: #000;
}
#right {
   float: right;
   margin: 1% 1% 1% 0;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}
</style>
</head>
<body>
 <div id="container">
  <div id="left">
   <p>Left div content goes here.</p>
  </div><!-- left -->
  <div id="right">
   <p>Right div content goes here.</p>
  </div><!-- right -->
  <div class="clear"></div>
 </div><!-- container -->
</body>
</html>

shaneH · Jun 7, 2007

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 · Jun 7, 2007

One reason not to use tables is that, per the W3C HTML 4.01 specifcation, Tables in HTML documents:

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 · Jun 8, 2007

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 · Jun 8, 2007

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 · Jun 8, 2007

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 · Jun 8, 2007

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 · Jun 8, 2007

display:inline; float;left; Then for the parent div, white-space:nowrap;

dougal85 · Jun 9, 2007

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

JPnyc · Jun 9, 2007

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 · Jun 9, 2007

shaneH wrote:
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 · Jun 9, 2007

Much of the time yes, but not always. Sometimes it's IE and Opera that agree and Gecko is the odd man out.

Weedpacket · Jun 10, 2007

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 · Jun 10, 2007

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 · Jun 10, 2007

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 · Jun 11, 2007

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 · Jun 11, 2007

Hey, I'm the reactionary codger around here. My text editor of choice was built in 1999.

shaneH · Jun 20, 2007

Weedpacket wrote:
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 · Jan 6, 2008

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 · Jan 6, 2008

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>

Two DIV elements aligning side by side...

NogDog

SshaneH

NogDog

SshaneH

NogDog

bpat1434

Ccgraz

JJPnyc

Ddougal85

JJPnyc

Weedpacket

JJPnyc

Weedpacket

JJPnyc

Weedpacket

JJPnyc

Weedpacket

SshaneH

Gguest

Gguest