Bambinos RSS

New Bamboo

Bamboo Blog

Archive

Sep
16th
Tue
permalink ismasan

Equal column height

You have several HTML columns and you want them to be the same height. Problem is, the content is dynamic so you don’t know what the actual height will be.

This jQuery bit resolves the highest column and applies it to all columns in the group.

;(function($){

$.fn.equalHeight = function(){
var max_height = 0;
$(this).each(function(){
var h = $(this).height();
if(h > max_height)max_height = h;
});
$(this).css(‘height’,max_height+’px’);
}
})(jQuery);

… And you use it like this:

$(‘div.column’).equalHeight();