CSS - Equal Height Boxes

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:

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:

• IE6 (and earlier) doesn't support min-height; instead the min-height value is treated as plain height. I recommend using conditional comments to specify the height, and an appropriate overflow behavior.

  <!--[if lte IE 6]>
    .box {
      height: 15em;
      overflow: auto;
    }
  <![endif]-->

• As the text reflows due to font variations, text-resizing, or content updates, the box heights may not match anymore. Just try to choose something reasonable for the initial min-height, and use with ems for the best flexibility. If a simple height specification were used, the larger content would either flow out of the boxes or create a scroll bar — both of which I find less desirable than mismatched boxes.

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