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
Comments
5 Responses to “Equal Height Columns”
Leave a Reply
Let me know what you think about this plugin :)
Здрасти Срдйо!
I’ve already used this plugin several times now, and I’ll be damned.. it actually works ;)
Cheers
Srdjo, you have like a kinda bug in this plugin. If you use it for a two-coloumn setup with left for menu and right for content. If you then set a padding on the right in order to make the content look nicer, your plugin is unable to calculate the appropiate height for the right side.
Cheers
Bo -> Can you show me an example with the issue ?
Bo -> The padding issue is now fixed in v2.0 :) Thanks for your feedback