Equal Height Columns Using Mootools

If you are a devout follower of my humble site, you will recall that back in early 2008 I posted an article in which I demonstrated how to achieve the equal column height’s effect using jQuery. Well, a year has passed and I have decided to revise the script but using MooTools this time around.

After looking at the original code, I decided that many of the options provided were unnecessary. So, I decided to start from scratch and I’m happy quite happy with the result. In this iteration, all you need to do is add a class name (equalize) to the columns you wish to equalize and you are done. Furthermore, I was able to reduce the code to 10 lines, eight if you remove the spacing lines.

If you are a copy and paste kind of person, just use the code below. Otherwise, download the JS files from the sidebar.

window.addEvent('domready', function()
{
	var columns = $$('.equalize');
	var max_height = 0;

	columns.each(function(item)
	{ max_height = Math.max(max_height, item.getSize().y); });

	columns.setStyle('height', max_height);
});

Leave a comment if you find something wrong with the code, I will do my best to fix it. Also, if you make use of the script, a link back is always appreciated :) Enjoy!