Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

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:


It happened again today. I was just walking down the street, and BOP!, some damn plumber jumped on my head.


Doo doo doo dah doo doo dah doo doo!

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 .box { min-height: 12em; } 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.


Tags: code css

Authorized users may log-in to leave a comment.

Last Blog:

Next Blog: The Man in the High Castle.