Cross browser equal height that works

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:

• Floatless layouts with display:table-cell
• Floatless layouts with display:inline-block

Further reading:

• Everything You know about CSS is wrong
• Cross Browser display:inline-block
• Equal Height boxes with CSS, part 2

Go crazy!