How to place 3 div's next to eachother

[Dan Grossman]

This is an easy one, what's the simplest way to take 3 div's and put them next to eachother, like a 3-cell 1-row table would be? Not sure which method is cleanest and doesn't disturb the rest of the page. Floating them all, relative positioning with top: and left:, or increasing margins as you move right?

<div id="container">
  <div id="left">content</div>
  <div id="middle">content</div>
  <div id="right">content</div>
</div>

[kefeso]

I'd say depend on whether or not your site will be fluid or static. For a static site, margins, relative position would all work, and they'd probably work better than float because it offers more precision.

However, if your site is fluid, then obviously floats will be your ultimate solution, whether you want all three columns fluid or only one fluid. Another plus for being fluid with float is, since you mentioned not to disturb the rest of the page, there is the handy clearfix that can allow you to modify the content below anyway you like.

EDIT: nonetheless, static or not, you should always float two columns and then relative or margin the other div or also float the third.

[Dan Grossman]

Right now I'm planning on a static width site. "container" would be of a certain size and therefore I can specify sizes for "left" "middle" and "right".

If I were to position them with "relative", would that be relative to their container? So I'd have equal "top" values but increasing "left" values?

[kefeso]

Actually no, the position: relative only means in relation to where the element would occur normally, thus, it would not be relative to their container.

For your need, first you would want to think over and make sure the widths of the columns. It would actually work to float all three columns left, or you could choose to float one left and float another one right then leave the middle space for the main content and then relative position it.

As for the 'equal top value', what I would say is your #container div will help this out, each nested div within your container div will be right up against the top of the container div. And your container div should be nested within your main wrapper.

For some 3 columns layout example, you can try paul's site http://www.pmob.co.uk/temp/3colfixedtest_4.htm