Rodrigo Flores > Equalizing Heights Across Different Elements with jQuery

Equalizing Heights Across Different Elements with jQuery

March 6, 2010

jQuery is a beautiful javascript library that simply makes things easier. I recently ran into a case where a client wanted several boxes with variable content to be as long as the longest box. Of course, jQuery came to the rescue…

The Scenario

Say you have a box (div) displaying a different testimonial every time the page is loaded. And you want two other boxes to be the same height as the one with the variable size testimonial.

* Note that if your content contains images, you will want to run the script once the window is loaded instead.

The Javascript

Nice & easy:

1
2
3
4
5
6
7
8

var maxHeight = 0;
$('.box').each(function() {
var boxHeight = $(this).height();
if(boxHeight > maxHeight) maxHeight = boxHeight;
});
$('.box').css({
height : (maxHeight + 'px')
});

I will actually work on a example integrating WordPress into the equation and update this article as soon as I get some spare time in my hands.

If you have a more efficient method, please comment away! Otherwise, I hope you find this useful.