Equal height boxes with CSS

Many web designers really like the idea of being able to place two or more containers, or boxes, side by side and make them be of equal height, regardless of how much content is in each box. Many designers also like to vertically center or bottom-align the contents of a container.

Traditionally, all that was needed to achieve that was to make each box a cell in a table row. We don’t want to use tables for layout anymore, however, so we need to find some other way. And that’s where the problems begin. Not because it isn’t possible to use CSS for the above effects, but because Internet Explorer doesn’t support it. So don’t blame CSS.

To prove that it’s actually very easy to create equal height columns with CSS, I’ve made a simple demo, consisting of three boxes that are displayed side by side. They all have the same height, and will adjust to the height of whichever box is tallest. The contents of one of the boxes is vertically centered.

The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells.

The basic XHTML structure looks like this:

<div class="equal">
	<div class="row">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>
</div>

Here is the CSS used to make this structure behave like a table:

.equal {
	display:table;
}
.row {
	display:table-row;
}
.row div {
	display:table-cell;
}

In the demo, I’ve used border-collapse:separate and border-spacing:10px; to add a bit of space between the boxes. This is the equivalent of using the cellspacing attribute.

Like I said, this does not work in Internet Explorer, but it works in all modern browsers I have tested in: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1.

More details of how CSS can be used to format tables can be found in CSS 2 Specification, Chapter 17: Tables. You may also want to take a look at Equal Columns with CSS by Gez Lemon.

Posted on May 30, 2004 in CSS