Easy Equal Columns with jQuery

Here is an easy way to make equal and scalable columns with jQuery. Tested in IE7, Safari 4, and Firefox 3. Just put your left side selector for the first argument and the right side in the second. Look at my code in the window.load function as an example.

function equalCols(leftSide,rightSide){
   if($(leftSide).height() < $(rightSide).height()){
      $(leftSide).css({minHeight:$(rightSide).height()+'px'});
   }
   else{
      $(rightSide).css({minHeight:$(leftSide).height()+'px'});
   }
}
 
$(window).load(function(){
   equalCols('#sidebar','#main_content.blog .right');
});

Notes:
Do not put this in your document.ready function because this needs to load after everything else has loaded. If you do put this in the document.ready this code will break because one side will always load faster than the other and it will then throw the entire script off.

To use this with Ajax, simply call the function equalCols() after you have put in the new content into either of the columns.

No, this will not work in IE6 and I did that on purpose , but if for some crazy reason need to support IE6, simply change the two minHeights to height

Posted in Programming, jQuery