Pew Pew Laser Blog

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

CSS - Equal Height Boxes

Last Update: 4.11.2008

This solution will create two content boxes of equal height using CSS. This is useful for when a page design calls for nicely styled elements of the same height.

If you are looking for large content areas to both keep the same height as one expands (say, for a side navigation bar and page content), then you should take a look at Faux Columns. This important CSS technique creates the appearance of multiple equally sized columns by using a repeating image background on the element behind the columns.

Messrs. Goomba and Starman will demonstrate:

A Goomba Says:

It happened again today. I was just walking around by the pipes, and BOP!, some darn plumber jumped on my head.

Starman Says:

Doo doo doo dah doo doo dah doo doo!

Both of those boxes are a simplified of Mr. Goomba's fancy expandable CSS box; using only two background images to create a fancy–schmancy box. The key to these equal height boxes is one line of CSS:

.box {
  min-height: 12em;
}

That style specification is applied to the .box class that contains both the Goomba and Starman quotes. Even though Starman's content isn't long enough to make his box the same height as the other box, the min-height specification sets both boxes to the same height height. Since I've specified the height in ems, the height of the boxes increases along with the text-height of the browser. For your boxes, just use a number of ems that's slightly taller than your tallest box.

There are a few things to be aware of when using this solution:


Credits

Mr. Goomba and Starman appear courtesy of the good folks at IconBuffet.com. The "Web 2.0" Photoshop techniques used to create the images for the content box used here originate from AbTuts.com.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me