DIVs of equal height

It’s the same old old problem you want to make a set of columns the same height but life it too short for the CSS only version. It’s technically possible to do but nowadays you can’t run the web without having javascript turned on. There must be an easier way.

After a short amount of googling I came across a few solutions. A couple were GPL’d which ruled them straight out as I want Red Gate to pay for my mortgage.

The best simple solution was found at.

http://www.cssnewbie.com/equal-height-columns-with-jquery/

function equalHeight(group) {
   var tallest = 0;
   group.Each(function() {
       var thisHeight = $(this).height(); 
       if(thisHeight > tallest) {
           tallest = thisHeight;
       }
   });
   group.height(tallest);
}

Now this worked for my particular situation but wasn’t quite nice enough for me. So I thought I’d put it forward to our internal web development e-mail list to see what they made of the issue. This is a list made of developers, designers, marketers who use HTML so can be quite a useful forum for getting good ideas. This threw up the beautiful code from Matt Lee.

Or, if you like a bit of code golf (and are using underscore.js, which you should be!):

$.fn.equalize = function () {
      return this.css("height", _.max(this.map(function () { return $(this).height(); })));
  };

See the whole thing at: http://jsbin.com/isixib/edit#javascript,html,live

Also, I don’t think Richard’s version worked if the elements were in increasing height order: http://jsbin.com/abovoq/edit#javascript,html,live

This seems to do the job really nicely and I thought it was so elegant that it should be shared. enjoy. The way I call this is to on every page perform the following code to equalize groups of divs to be the same height – it will also work for multiple rows and columns of divs: http://jsbin.com/isixib/2/edit#javascript,html,live

    $("div.height1").equalize();
    $("div.height2").equalize();
    $("div.height3").equalize();