Equal Height Columns with MooTools

There are a number of Javascript solutions around for creating equal height columns in a design. They all work in pretty much the same way - you generally specify the required columns in the height function, and run it after the DOM is available.

On the Radio NZ site I recently ported our old column function to use the Mootools library.

Here is the old function:

/* SetTall by Paul@YellowPencil.com and Scott@YellowPencil.com */

function setTall() {
if (document.getElementById) {
 var divs = Array();
 var list = new Array('cont-pri','cont-sec','hleft','hright','features','snw');
 count = 0;
 for (var i = 0; i < list.length; i++) {
  if ( (temp = document.getElementById(list[i]) ) ){
   divs[count] = temp;
   count++;
  }
 }
  
 var mH = 0;
 for (var i = 0; i < divs.length; i++) {
  if (divs[i].offsetHeight > mH) mH = divs[i].offsetHeight;
 }
 for (var i = 0; i < divs.length; i++) {
  divs[i].style.height = mH + 'px';
  if (divs[i].offsetHeight > mH) {
   divs[i].style.height = (mH - (divs[i].offsetHeight - mH)) + 'px';
  }
 }
}
}

The first part of the function places the ids we want in an array, then checks to see if these are valid and storing them in another array of they are. This check is required as the hleft and hright divs are only found on the home page.

The second loop finds the tallest div, and the last loop changes the height of each div to that value (taking into account any CSS padding).

The Mootools version is much simpler:

function equalHeights() {
var height = 0;

divs = $$('#cont-pri','#cont-sec','#hleft','#hright','#features','#snw');
 
divs.each( function(e){
 if (e.offsetHeight > height){
  height = e.offsetHeight;
 }
});
 
divs.each( function(e){
 e.setStyle( 'height', height + 'px' );
 if (e.offsetHeight > height) {
  e.setStyle( 'height', (height - (e.offsetHeight - height)) + 'px' );
 }
}); 
}

The first call to $$ returns only valid divs, eliminating the need to check. The each iterator is then used twice - the first time to get the maximum height, and the second to set all the divs to that height.