Equal Height

by Santosh Thakur

HTML

<div id="wrap">
     <h1>Equal Height Columns with jQuery</h1>

    <div class="column" id="col1">
        
        
    1.Sets a variable, “tallest,” to zero.<br>
    2.Loops through each of the items in the group we’ve defined.
    If the current item is taller then the previous “tallest” item, it becomes the new tallest item.<br>
    3.Once we’ve looked at all the items, they all get their height reset to be the same as the tallest of the group.

    </div>
    <div class="column" id="col2">
        <p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns.</p>
        <p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
    </div>
    <div class="column" id="col3">
        <p>And I think a single class is an addition we can all get behind.</p>
    </div>
</div>

CSS

body {
     font: small/1.3em Arial, Helvetica, sans-serif;
     background-color: white;
 }
 #wrap {
     width: 600px;
     margin: 0 auto;
 }
 .column {
     float: left;
     padding: 10px;
 }
 #col1 {
     width: 110px;
     margin-right: 10px;
     background-color: #E2DDC4;
 }
 #col2 {
     width: 200px;
     margin-right: 10px;
     background-color: #6B99F6;
 }
 #col3 {
     width: 210px;
     background-color: #E87C5E;
 }

JavaScript

function equalHeight(group) {
alert(group);
    var tallest = 0;
    $('div').each(function () {
        var thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function () {
    equalHeight($(".column"));
});