Note: This article was first posted to the Lemon Digital Blog.
Since its dawn, CSS has been plagued with the lack of a bullet proof technic to produce equal height columns, boxes and grids. The fortunate few have been able to avoid this problem by "designing for the Web" — no crazy fonts; no equal height.
For those unfortunate millions, it isn't so cut 'n' dry. Many designers continue to create vertically aligned and beautifully designed mock-ups in PhotoShop fully expecting the end result to look the same on the Web (and quite rightly so); if not, at least the columns should remain at equal height in all scenarios!
Thankfully display:table-cell and display:inline-block come to the rescue. Like magic, these change the characteristics of any block level element in amazing ways giving elements table-cell like behaviour; The latter even allows proper element tiling in an orderly fashion. If you come from the hybrid-layout era you'd know how convenient tables for layout were. These two CSS properties give the best of both worlds - better markup semantics with grid-like features.
This sounds like fancy stuff but really, it is quite simple. Code always speaks louder than words so here's an example to get the juices going: Working with cells in CSS
Now, let me take you through the code once you've had a gander through the source code...
.grid { display: table; }
.grid li { display: table-cell; }
These two lines are all we need to change a list into a table row. But here's the catch — this only works in Mozilla, Opera and Safari browsers; as usual IE is the odd one out. The forthcoming IE8 will support these display values but for now we have to hack our way to a solution that really works. Here's where things get interesting.
To get equal height in IE we turn to inline-block. IE has some buggy CSS support. inline-block only works in IE if we duplicate it with an inline call afterwards, like so:
.grid {
width: 100%;
height: 1%;
}
.grid li {
display: inline-block;
vertical-align: top;
height: 100%;
}
.grid li {
display: inline;
width: 24.9%;
}
In the above we're specifying a width of 24.9% — this value will be different depending on the number of cells in a row. Our example has four, so in theory it should be 25%. This weird value is just evidence how bad IE's support is when it comes to CSS.
Finally to produce equal height columns we increase the bottom padding to a very high value to overcome the varying content height:
/* equal column height hack - for IE6 & IE7 only */
.grid {
voice-family: "\"}\"";
voice-family: inherit;
overflow: hidden;
}
.grid li {
voice-family: "\"}\"";
voice-family: inherit;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
That's it! Pretty simple if it wasn't for IE! 
Here are two more examples based on the concepts talked about in this article:
Further reading:
- Everything You know about CSS is wrong
- Cross Browser display:inline-block
- Equal Height boxes with CSS, part 2
Go crazy!
Pingback: The Fortunate Freelancer. | 7Wins.eu