Creating equal height columns with tables is easy. Of course we shouldn't use tables for layout. With CSS it's a little harder. If, for example, you create a three column layout by floating 3 DIVs within an overall container the result will probably look something like the following:
All's well and good except those pesky columns aren't the same height. It's tricky but we can fix this a number of ways without resorting to tables.
The most commonly described method, "Faux Columns", works by applying a background image to an overall container. As the container will stretch to the height of the largest contained column, assuming a suitable clearing method is used, a vertically repeated background image representing the colour of each column will "fake" the effect of equal height columns.
The third and final way which this post investigates uses pure CSS and doesn't require any background images, at least initially.
Taking the original example shown, we add a large bottom padding value to force the background of the shorter columns beyond the height of the longest column of content. The size of this padding is totally arbitrary. We just need to make sure it's enough to take account of the difference in content between columns. This gives us the following:
Next we trick the browser into thinking the columns are still only as high as the content they contain by applying an equal sized but negative bottom margin. Finally we add a rule to the container to hide the overflow created by the padding value. The result, 3 equal height columns.
But what if we want to add borders to the columns? Unfortunately, things become slightly more complicated. We start by adding some spacing between the columns. A right margin handles this nicely. Next we add a border rule to each column. This ought to be enough but unfortunately the oversized padding we added previously pushes the bottom border out of view.
To solve this we need to "fake" the bottom border using a background image applied to the main container and positioned bottom, centre. We'll also need to float the container or specify a width to force it to shrink wrap the columns and therefore ensure correct positioning of the background image. Internet Explorer only works if we also float the inner container.
We won't see the background if we apply it and the overflow hiding rule to the same container so we'll have to create an inner container and move the overflow rule to that. Finally we need to add a 1 pixel (or value corresponding to the border width required) bottom padding to the outer container to provide space for the background image to show through. We have now achieved equal height columns with borders applied.
Finally we can make the columns elastic by specifying the column widths in ems rather than pixels. To keep this example simple I've only included two columns.
- I've tested the various examples described above in Firefox 1.5, Safari 2, Opera 9 and Internet Explorer 6.
- The third technique described here was, I think, first written about on Position is Everything in an article entitled One True Layout. I'd highly recommend checking it out also.
- Thanks to Andrew Phillipo, a Yahoo! colleague, for suggesting the use of a background image to solve the bottom border problem.