Dynamic height for all row DIVs

adjust the heights of the tile containers equally

by ajinkyax

HTML

<div class="container">
    <div class="row">
    <div class="span3 well">
        <p>I'm really short</p>        
    </div>
    <div class="span3 well">
    <p>I'm in the middle</p> 
    <p>I'm in the middle</p> 
    <p>I'm in the middle</p> 
    </div>
    <div class="span3 well">
        <p>I'm really long</p>
        <p>I'm really long</p>
        <p>I'm really long</p>
        <p>I'm really long</p>
        <p>I'm really long</p>
        <p>I'm really long</p>
    </div>    
</div>

</div>

CSS

@import url(http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css);

JavaScript

boxes = $('.well');
maxHeight = Math.max.apply(
Math, boxes.map(function() {
    return $(this).height();
}).get());
boxes.height(maxHeight);