Equal height divs

To automatically make two divs match each other in height you just need a simple Javascript file and CSS classes. Save the following to a file called equalheight.js

equalheight = function(container){
var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {
   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;
   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}
$(window).load(function() {
  equalheight('.equal');
});

$(window).resize(function(){
  equalheight('.equal');
});

Then include the script in your theme footer.php or functions.php file:

<script type="text/javascript" language="javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/equalheight.js"></script>

Once that is in place, all you need to do is apply the class "equal" to two or more divs within the same parent container:

<div class="parent">
<div class="equal">This is the first container</div>
<div class="equal">This is the second container</div>
</div>

Credit: https://gist.github.com/pablolobos