Two column CSS

what is the best way to make two css columns.

[Phantom]

Hi. I'm making a site that includes a left and right column, which should both take up about 50% of their conatiner. However, I have seen two ways of doing this, and am not sure which is the best/compatible with the most browsers. The first way is floating the left column left, setting a width, and setting the left margin on the right column to be a little bigger than the right column. Also, I can float both columns to the left and set them both to 50% width.

Before I found these two methods online, I tried my own, which didn't work for some reason. I gave the left column a height of 100%, with the idea it would take up the entire conatiner and stop the left column from wrapping underneath. This seamed to work, except the left column streatches much longer than just it's conainter, forcing a scrollbar to appear to see it's big empty space.

Is there a best way to do a two column layout, and what is it? Also, what was happening with my 100% height box?

(I'm testing in Firefox 1.5 on Linux, btw)

[Setek]

Firstly:

Why doesn't

height: 100%;

work the way I want?

height

, as determined by the W3C specification, works in a way that some would consider "unintuitive" (reference: W3C on the height property [w3.org].)

What happens is, when you set an element to have a height of 100%, it checks the parent container for its height, and measures as a percentage according to that (if no height is set, the height is interpreted as auto [fill whatever you need but no more, no less].)

So, with margin, padding, borders, all sorts of things, you can make 100% push out a lot farther than you intended.

Now, about the two-columns...

There's not really a guaranteed best way to do it, there are just several methods that are better applied to different situations.

Absolutely positioned:
This is good because you get better control. You can also have more semantic markup such as better menu structures and the like (when involved in situations like a horizontal main menu, with vertical submenus.) It basically involves:

1. Absolutely positioning one column, setting width to 50%; and
   
2. Pushing

   margin-left

   on the second column to 50%.

This is good because you get better control, this is bad if there ever was a time that the column that's absolutely positioned is longer than the other column, and there was a footer involved... being absolutely positioned, it just overlaps stuff.

Float like a butterfly:
This method is better applied to those situations described above - where either column could be the longest. It basically involves:

1. Float one column, setting width to 50%;
   
2. Pushing

   margin-left

   of the second column to 50% (stops the bumping down [when using both floated, both 50% width] if viewport isn't wide enough to handle amount of content); and
   
3. Applying

   zoom: 1;

   to IE6-specific stylesheets, to get rid of IE's 3px text bug.

This is better if either column could be longer at any stage, but places markup restrictions. Also, floating gets you into trouble with floated objects bumping down and making a mess if the viewport width isn't long enough. And, floating both columns gives its parent no height, so you'll have to find a way to accommodate for that too.