Equal Height Blocks in Rows

Chris Coyier //

There are plenty of solutions for equal height columns using jQuery (like matchHeight.js). The basic idea is to measure all of their heights and then set all their heights to that of the tallest one.

But what if there is multiple rows of blocks and you only want to increase the heights to match in the current row? This could happen from having different sized thumbnails or different amounts of text in each box.

Stephen Akins posted a neat idea on how to solve this. The idea is largely the same, test the heights of divs and set them to the tallest, but before it does that it measures the top position. From that, it is able to tell which divs belong to which row and only affect divs within that row.

Here is the whole thing. I just tweaked it a little from Stephen's original to make it a bit more efficient.

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;

 $('.blocks').each(function() {

   $el = $(this);
   topPosition = $el.position().top;
   
   if (currentRowStart != topPosition) {

     // we just came to a new row.  Set all the heights on the completed row
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }

     // set the variables for the new row
     rowDivs.length = 0; // empty the array
     currentRowStart = topPosition;
     currentTallest = $el.height();
     rowDivs.push($el);

   } else {

     // another div on the current row.  Add it to the list and check if it's taller
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

  }
   
  // do the last row
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
   
 });​

$('.blocks') would be changed to use whatever CSS selector you need to equalize.

What About Fluid Width?

One of the main points of not using a table for this is that floated divs can rearrange themselves based on the available horizontal space, which is nice for fluid width. We can adjust the above code to deal with that as well. Basically the first time this is run we'll measure the height of each block and remember it with jQuery's data() method. Then when the window is resized, run the code again but use the original size to adjust the rows, not the new size.

The demo for this is fluid width. If you want that code, just view source and snag it:

View Demo


Wish it didn't have the jQuery dependency? Check this.