Columns of Equal Height with JQuery

Question

Hello,

Can we put JQuery to use to create columns of equal height? If yes, how?

Thanks

Answer 1

Cycle through each column, and find the tallest. Then set all to that height.

var maxHeight = 0;
$(".column").each(function(){
  maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);​

Online Demo: http://jsbin.com/afupe/2/edit

Answer 2

I posted a similar question a few days ago and here's the piece of code that worked for me.

* #column_left, #column_center, #column_right: are the three column divs that are supposed to have the same height. I suppose it can work with more or less number of columns.

<script type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt;

<script type='text/javascript'>
$(document).ready(function() {

    // get the heights
    l = $('#column_left').height();
    r = $('#column_right').height();
    c = $('#column_center').height();

    // get maximum heights of all columns
    h = Math.max(c, Math.max(l, r));

    // apply it
    $('#column_left').height(h);
    $('#column_right').height(h);
    $('#column_center').height(h);
    });
</script>

It was posted by user "widyakumara". I hope it helps you too.

Answer 3

@ktsixit you should give a class to all your columns instead of using unique IDs in this case. You can then calculate and apply the tallest height to all items at once. Even if you don't or can't use a class, you should at least use variables to store the div ID references. With the code above, you're parsing the DOM 6 times. You could at least reduce that to 3 parses by using variables.