Question

I have tried numerous things (css & js) and can’t get some boxs to have equal heights on the following site:

http://www.ancoris.com

The boxes I’m talking about start at the “Ancoris Success Stories” (the orange box) and the 2 to the right.

The area I’m talking about is below (I haven’t included all code, just the container & 3 div’s I need to equalise):

<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4">
   <div class="moduletable blueboxonly span4">
   <div class="moduletable orangebox h3 span4">
</div>

Preferably I want to do this with CSS if possible – but just can’t get it.

Thanks

Answer 1

You can set all div height to the height of a div, which has maximum height.

var maxHeight = 0;

var divs = jQuery("#below-content .moduletable");

jQuery.each(divs, function(){
    var height = jQuery(this).height();
    if(maxHeight<height)
        maxHeight = height;

});
divs.height(maxHeight);