CSS: layout with display table values

Tables have been extensively used in the past for building complex page layouts. This was due to the fact that tables are flexible, meaning that they always fit their content. Originally browsers handled tables with their internal algorithms, but after the introduction of CSS these algorithms have been reformulated to meet the requirements of the CSS specifications. We can take advantage of the table values of the display property to build multi-column CSS layouts. Let's see how.

Suppose that you have an HTML structure like this:

<div id="site">
 <div id="branding">...</div>
 <div id="navigation"></div>
 
 <!--columns start here-->
 <div id="content">
 
  <div id="main">...</div>
  <div id="content-sub">...</div>
  <div id="extra">...</div>
 
 </div>
 <!--columns end-->
 
 <div id="site-info">...</div>

</div>

We're only interested in the content area, when we want to display three columns of equal height. Here's how we can do with table values:

#content {
 width: 90%;
 margin: 0 auto;
 display: table;
 padding: 1.5em 0;
 border-spacing: 1em;
}

#main, #content-sub, #extra {
 width: 33%;
 display: table-cell;
 background: #ffa;
 padding: 1em;
 border: 1px solid #999;
 border-radius: 10px;
}

We've set display: table on the main container and display: table-cell on the three columns. As you will see, columns are equal in height and all aligned. This feature is supported in Firefox, Chrome, Safari, Opera and Internet Explorer 8 and higher. You can see a demo below.

Demo

Live demo