Two Columns: Height or Margin?

HTML & CSS
1

I’m helping a friend learn web design, and we’re working on a two column layout. It goes something like this:


<div id="first_column"> ... </div>
<div id="second_column"> ... </div>

…with the CSS:


#first_column {
	width:300px;
	float:left;
}

Simple stuff. Then the content in #second_column got to be bigger than the content in #first_column. Again, no problem, just give #second_column a 300px margin-left.

But then they asked why not just give #first_column an explicit height? I didn’t have an answer, and so I’ve come here. I think the reason I do margins is just because that’s how I learned it.

2

Hi,

You rarely want to give containers that hold fluid content a height because that means the element can never grow and if a user resizes the text then the layout breaks.

Content on a site is ever changing and you want the element to accommodate one word or a thousand words without having to do anything different. If you work on an assumption that one column will always be longer then that’s a fragile assumption that will break at the first opportunity.

There are many ways to make two columns and in a fixed width layout floating both columns with a specific width is the easiest.

In a fluid layout you can float the left column and that give the right column a margin-left to clear the float but it does suffer from the 3px jog in iE6 although that is a diminishing problem these days.

You could also just float the left column and then give the second column overflow:hidden and it will automatically form a rectangular box to the side of the float.(IE6 would need to have haslayout on the element though for this to work). This method is no good if you want visible layout or if you don’t want the whole block to wrap under at small screen sizes.

(Not forgetting that for ie8 and other modern browsers you could use the display:table properties for columns or perhaps display:inline-block but they are not without bugs also.)