Equal Height Columns.

Back in the old days of web design, when a properly wrangled table was all the rage, it was easy to create multiple columns of the same height. Doing so with CSS has proven tricky - mostly due to the auto-expanding boxes. Many of the existing solutions to this problem use JavaScript or extra divs and background images, or don't even work in IE6. I find those to be rigid and sub optimal solutions.

I propose a new solution to the problem of creating columns of equal height in CSS. This solution is simple, JavaScript free, degradable and highly flexible. Messers Goomba and Starman will demonstrate:

Both of those boxes are a simpler variation of the fixed width Goomba box, and they have two background images to create a fancy-schmancy box. The key to the equal height columns is this line of CSS:

which is applied to the .box that contains both the Goomba and Starman Quotes. I've specified a minimum height for both boxes, no matter how large their content is. Furthermore, I've done it using ems as the units - ems are a unit of size relative to the text size that's being displayed. So, as the text size of the browser increases, the height of both boxes also increases. For your boxes, just select a number of ems that's slightly taller than your tallest box.

There are a few oddities to this solution, but for the projects I've developed they've not been noticeable.

• IE6 doesn't support min-height; instead the min-height value is treated as plain height. So you'll need to use conditional comments to specify the height as some other reasonable value. (I've used 15ems in this example.)
• As the text size increases or lots of content is added to a box, the box heights may not match anymore. Just try to choose something reasonable for the initial min-height, and stick with ems for the best flexibility. If a height specification were used, the larger content would flow out of the boxes or create a scroll bar - which I find less desirable than mismatched boxes.

Permalink