Equal CSS columns with jQuery

July 3rd, 2010 jQuery, Web Design

Here’s a quick solution for equal CSS columns using jQuery.

$(function() {
    jQuery.fn.makeEqualHeight = function () {
       
        // Calculate the height of the tallest column
        var maxHeight = 0;
        this.each(function() {
            maxHeight = ($(this).height() > maxHeight)? $(this).height() : maxHeight;
        });
        return this.height(maxHeight); 
    }
 
    // Call the function that will make all columns of the class "column" equal
    $(".column").makeEqualHeight();
});

Leave a comment