columnas equilibradas con css + jQuery

Simple jQuery Equal Columns Plug-in

by cristian_cena

HTML

<div id="columnas">
    <div id="col1">
        1 <br/>1 <br/>1 <br/>1 <br/> 
    </div> 
    <div id="col2">
        2 <br/>2 <br/>2 <br/>
    </div>
    <div id="col3">
        3 <br/>3
    </div>
</div>

CSS

#columnas{overflow:hidden; width:90%; margin:0 auto;}
#col1, #col2, #col3{width:30%; float:left; text-align:center;}
#col1{background:red;}
#col2{background:green}
#col3{background:yellow;}

JavaScript

/*
fuente: Simple jQuery Equal Columns Plug-in
http://snipplr.com/view.php?codeview&id=13096
*/
jQuery.fn.equalCols = function(){
    //Array Sorter
    var sortNumber = function(a,b){return b - a;};
    var heights = [];
    //Push each height into an array
    $(this).each(function(){
        heights.push($(this).height());
    });
    heights.sort(sortNumber);
    var maxHeight = heights[0];
    return this.each(function(){
        //Set each column to the max height
        $(this).css({'height': maxHeight});
    });
};

/*
implementamos el plugin
*/
jQuery(function($){
    $('#col1,#col2,#col3').equalCols();
});