Two columns, same height using CSS and no Javascript. Yes, you can

 When we abandoned tables for website design, we lost something. If there's something good in table cells, is that they all have same height. What about CSS? Two columns with same but variable height using just CSS, no Javascript and no tables. And it should work in all browsers. How the hell are we going to do that?

Example of Two columns of same height using CSS

Well, here's a solution. A little trick that you can use IF YOU KNOW in advance which column is going to be the longest one, even if you don't know its height.

Let's start with some HTML:

<div id=”column-one”>Red chief, this is column one, repeat,
 this is column one.</div>
<div id=”column-two”>Red chief, this is column two, repeat,
 this is column two, and oh my dog, this is full of stars!
 What the hell did you put in this cup of coffee?</div>

If we knew the height of the columns in advance, the problem would end here. We just specify column height and we're ready to go.

But we don't.

This is the plan: the larger column will have automatic height. The shorter column will have a fixed height, but it will be absurdly long: 10,000 pixels or so. Both columns will be put inside a containing DIV which will cut the remaining of the second one.

This is the HTML:

<div id=”container”>
  <div id=”column-one”>Red chief, this is column one, repeat,
 this is column one.</div>
  <div id=”column-two”>Red chief, this is column two, repeat,
 this is column two, and oh my dog, this is full of stars!
 What the hell did you put in this cup of coffee?</div>
</div>

And this is the CSS:

#container {width: 600px; margin: 20px auto;
 overflow: hidden;  position: relative;}

#column-one {position: absolute; width: 300px;
 height: 10000px; top: 0px; left: 0px; background: orange;}

#column-two {width: 290px; margin: 0px 0px 0px 310px;  background: yellow;}

The trick is in the overflow: hidden property. This is telling the DIV to cut whatever is out of its limits, doing the trick. The remaining is simple: The insanely long column is absolutely positioned, and the other column has a width and margins so that it doesn't overlap.

It even works on IE6. How cool is that?

See it in action here.

Hi there, great post.

Are you seeing any issues using this method if you have anchor text on the page in the middle column of a three column layout? It seems to mess up the layout and content dissapears up under the heading of my layout because of the overflow issue!

Have you encountered this at all?