Equal Height Columns

Overview

EqualHeightColumns is a simple jQuery Plugin, that you can use to design “Equal Height Columns” for your site. This plugin is so simple that even our moms will know how to use it :)

How to use

After you maid your HTML code for your columns and maid them float all you need to do is to point the EqualHeightColumns plugin at your column holder.

JavaScript that goes for inbetween your <head> tag.

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
$("#MainContainer").EqualHeightColumns($(".column"));
});
</script>

Your column set up could looks like this

1
2
3
4
5
<div id="MainContainer">;
<div class="column" id="columnLeft"></div>
<div class="column" id="columnMiddle"></div>
<div class="column" id="columnRight"></div>
</div>

As you can see all we need to tell

Demo

I maid a very simple demo where you can see how easy it is to make it work
Click here to see my demo

Download

Click here to download the latest version

Changelog

Version 2.0

  • 09.12.2009 : Total rewrite of the original plugin to make the best code optimization.
  • 09.12.2009 : Added padding control so that CSS padding won’t effect the column height.
  • 09.12.2009 : Added margin control that alowes dynamic top postion of columns.

Version 1.0

  • Initial Release
Get Adobe Flash playerPlugin by wpburn.com wordpress themes