Equal Height Divs?

Ever wanted to make a row of divs the same height regardless of the contents?

One of the things I get asked for a lot is to have on the Home page of a website a row of divs that have an equally placed read more link/button at the bottom. Sounds simple right? Just make all the divs have the same height say 600px. But what if the content is dynamic or the end user intends to alter the copy?

To combat this problem I wrote a little piece of jQuery

First off I give all the divs I want to be the same height the class “eq_height” as well as the class name that represents the css I want to use, say “third-box”.

<div class="third-box eq_height">1st box</div>
<div class="third-box eq_height">2nd box</div>
<div class="third-box eq_height">3rd box</div>

Now we need the JS

My function checks on page load to see if the a div with the class “eq_height” exists by using the “length” method:

$( window ).load(function() {
  if ($(".eq_height").length > 0){
      //do stuff
      }
 });

Next we need to create the variables we will need

     var lastHeight = 0,
         newHeight = 0,
         finalHeight = 0,
         divArray = new Array(),
         theDiv;

Note the array, this will hold the divs later on.

Now we use the split method to grab our div elements

$('.eq_height.' + $('.eq_height').attr('class').split(' ')[0]).each(function() {

This grabs the first class from the div with the class eq_height.

Next assign the values to the variables

        
        theDiv = $(this);
        divArray.push(theDiv);
        newHeight = theDiv.height();

Notice that we push the div elements into the array declared earlier. This will be used to assign the height values later.

Compare the values

        
         if(newHeight > lastHeight)
           {
            lastHeight = newHeight;
            finalHeight = newHeight;
           }

If the next div height is greater than the last save that value to finalHeight

Finally assign the height values to the divs

     $(divArray).each(function() {
       $(this).height(finalHeight); 
     });

The full script should look like this:

$( window ).load(function() {
  if ($(".eq_height").length > 0){
     var lastHeight = 0,
         newHeight = 0,
         finalHeight = 0,
         divArray = new Array(),
         theDiv;
         
     $('.eq_height.' + $('.eq_height').attr('class').split(' ')[0]).each(function() {
        theDiv = $(this);
        divArray.push(theDiv);
        newHeight = theDiv.height();
        if(newHeight > lastHeight)
           {
            lastHeight = newHeight;
            finalHeight = newHeight;
           }
        });
   
     $(divArray).each(function() {
       $(this).height(finalHeight); 
     });
   }
});

Lots of improvements and add ons can be applied to this script, feel free to do so.

*I offer no support and except no liability for use of this script