Equal Height columns with CSS

The technique

Ever wanted a clean CSS-only way to make equal-height columns? The CSS properties display: table, display: table-row and display: table-cell may be just what you’re after—they can be used to make containing elements act like old-style table cells.

Like for HTML tables, the browser will fudge the width of cells rather than allow elements to overflow. You can see the effect on this page if you narrow the browser window enough—the table will stay at 85% of the viewport width, and this side column will be squashed to make room for the <code><pre> elements in the others.

This technique isn’t just useful for generating equal-height columns. You could, for instance, use it for non-tabular data (such as a list) which you want to display like a table. However, do remember that where you have tabular data, an HTML table is still the right tool.

As usual, there’s a catch, and also as usual, it’s IE. Versions prior to IE8 don’t support this technique properly. With the styles I’ve used here IEs 5, 6 and 7 will get the widths right, but column heights will vary with their content. There is, however, a fix—see Equal height columns with CSS, Part 2.

The HTML

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      Cell content
    </div>
    <div class="table-cell">
      Cell content
    </div>
    <div class="table-cell">
      Cell content
    </div>
  </div>
</div>

The CSS

The basic layout:

div.table {
  display:table;
  width: 85%;
}
div.table-row {
  display:table-row;
}
div.table-cell {
  display:table-cell;
  width: 33.3%;
}
div.table h1 {
  display: table-caption;
}

Some extra styles to make it a little bit prettier:

div.table {
  margin: 10px auto;
  padding: 5px;
  border: solid 1px #000;
  background: #ccc;
  border-collapse: separate;
  border-spacing: 10px;
}
div.table h1 {
  text-align: center;
}
div.table-cell {
  padding: 5px;
  border: solid 1px #000;
  background: #fff;
}