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.
- Previous post: Budget Design
- Next post: Non-latin Lorem Ipsum
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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
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.
Sorry, comments are closed for this post.