CSS3 Equal Height Columns Tutorial

12/16/2012

Works perfect in all modern browsers IE8+. Web designers have come up with quite a few ways to create equal heights over the years. However, now that css3 is a reality, simply using display table is by far the easiest way to accomplish them.

CSS

#box {
display:table; 
width:100%;
}
.column {
display:table-cell;
width:50%;
background:#ccc;
padding:0 20px;
}
.two {
background:999;
}

HTML

<div id="box">
   <div class="column">
      <p>Some Content</p>
      <p>Some Content</p>
      <p>Some Content</p>
   </div>
   <div class="column two"></div>
</div>

ADVERTISE HERE