How to make Joomla main content and modules columns match height dynamically?

Question

Hi I have a Joomla site with a template that has 2 columns. One for the main content and the other for modules. On different pages either the content column is shorter than the module column or vice versa. How can I ensure that the 2 columns are always of the same height so that they both meet up equally at the footer on any page?

Answer 1

You'll need some CSS hacks or Javascript. Personally I favour the Javascript method, google equal height collumns.

Answer 2

Using Javascript:

window.addEvent('load', function(){  
// Load assuming there could be images.    
// Otherwise use domready  
  var columns = $$('css selector for the columns');  
  if(columns && columns.length > 1){  
     var heights = [];  
     columns.each(function(el){  
        heights.push(this.getStyle('height'));  
     }).setStyle('height', Math.max.apply( Math, heights ));  
     delete(heights);  
  }  
});  

You can use CSS to make sure your footer stays at the bottom of the page. Love Mootools.