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
Recent Comments