Equal Height Columns

Simple snippet to create equal height columns without the need of a plugin.

by kachibito

HTML

<div class="content main">box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 
box01 box01 box01 box01 box01 box01 box01 box01 </div>
<div class="content sidebar">box02 box02 box02 box02 </div>
<div class="content sidebar2">box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 
box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 
box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03</div>

CSS

div {
    background-color: #eee;
    display: block;
    float: left;
    margin-right: 10px;
    padding: 10px;
    width: 150px;
}

JavaScript

var m = Math.max(
    $('.main').height(),
    $('.sidebar').height(),
    $('.sidebar2').height()
);
$('.content').height(m);