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 Chapter 17 of the CSS 2 specification. You may also want to take a look at Equal Columns with CSS by Gez Lemon.

Posted on May 30, 2004 in CSS

Comments

  1. It’s easily forgotten that CSS has great features like this one, and the :after and :before pseudo-elements, just because the most popular web browser, by a wide margin, doesn’t support them.

    I can barely imagine what it would be like in a world where nobody used Internet Explorer, it’d just be Too Good To Be True.

  2. Tomas: that’ll hopefully happen very soon.. the beauty and simplicity of CSS are too shiny “um sein Licht unter den Scheffel zu stellen” (german phrase, sorry for that. Means something like “to put its light under a bushel”). Roger: you’ve written a real cool article, can’t wait to read your next one.

  3. I’ve been using “display: table” for a while, but it still isn’t of much use in the real world because of IE. That aside, it sure will make life easier in the future.

  4. August 12, 2004 by tswan

    How does replicating the code of a table using div’s make this any better than just using a table? It still mixes presentation code with content, which was what css was supposed to enable us to move away from.

  5. August 12, 2004 by Roger (Author comment)

    tswan: It depends on what it is you are displaying. This method makes it possible to display the content in different ways without changing the markup. The demo is mostly meant as a proof of concept, and to show that equal height and vertical centering is possible with CSS.

  6. Those who think IE is going to be going away anytime soon are in the dreamspace.

    Check your logs. IE is, regretfully, going to be around for a long long time, if only through inertia.

    Not everybody using the web upgrades and modernizes browsers or operating systems or computers.

    We’ll be dealing with IE for at least 10 years.

    So the question is how do we make neat CSS numbers like this work with IE?

  7. August 12, 2004 by Roger (Author comment)

    Vanderleun: You’re right about IE continuing to haunt us for a long time, though this site only has around 34% IE users. As for making IE do this without using a table, I don’t know. I guess if you toss in a bunch of JavaScript it’s possible that you could come up with something similar, but I doubt it’s worth it. In some situations, sending a different set of CSS rules to IE to stop it from breaking the whole page completely, an approach I describe in the follow-up to this article, may be of use.

  8. Just by surfing around in net I definitely found a very informal place with a lot of good stuff for everybody. I will certainly visit your site again sometime. Really good work.

  9. There is no way any web designer who works with real clients would implement a technique that breaks in IE. How would one explain to the customer that “the site doesnt work for 70% of the users, but its their fault, not mine”.

    I believe there are some ways to do inline boxes in CSS that stay equal in height, for example you could use a extended faux column technique. But they wont look as neat as the one you provided here Roger, but then again, IE support is still a must or I’ll loose my job.

  10. September 4, 2004 by Roger Johansson (Author comment)

    David: Probably not. It does depend on how badly it breaks, but I agree that this method can’t really be used in a lot of real world cases yet.

  11. I started to use display: table-cell lately for all the more standards compliant browsers and then use Dynamic Properties to get IE to display things correct. The clue is, that these Dynamic Properties cannot be turned off, even if all scripting is deactivated in IE!

    In the above demo you don’t even need the div.row, it should work even without.

  12. For the above 2 comments: Stop with the comment spamming!!

    BTW, there are a few other ways, which I still cant figure out… http://www.positioniseverything.net/threecolbglong.html And I have no Idea how this one stays equal height: http://www.positioniseverything.net/piefecta-rigid.html

  13. December 30, 2004 by Roger Johansson (Author comment)

    Zach: Thanks for pointing out the spam. For some reason I’d missed those two comments.

    The techniques you mention differ from what I describe here in that they use floats, background images, and wrapper divs. They also work in IE6, which this technique does not. I made this demo to show how easy some things would be if it wasn’t for Internet Explorer.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.