Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

Dynamic Drive Blog Here

CSS Equal Columns Height script (v1.01)

Date: 11/02/2006 | By ddadmin | Comments: 209

A common pitfall of a CSS based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etc.

This is a generic "CSS Equal Columns Height" script that will dynamically set the participating columns' heights to that of the tallest column's height, creating a uniform columns height layout. Use this script on any of our CSS Layouts for example. It's a matter of plug and play! To use this script, just insert this line of code into the HEAD section of your CSS layout page:

<script src="equalcolumns.js" type="text/javascript"></script>

As you can see, it references the external .js file "equalcolumns.js", which you should download (right click and select "Save As") and then upload to your own site.

This script is configured by default to automatically work with all of the layouts in our CSS Layouts section, whether 2 columns or 3 columns, fluid or fixed. Just add the script to the HEAD of any of these pages, and that's it!

If you wish to use this script to equalize the columns of your own custom CSS layout, open up "equalcolumns.js", and refer to the line:

ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]

Change "leftcolumn", "rightcolumn" etc to the IDs of the CSS columns you wish to equalize. The script will do a check first to see if each corresponding column actually exists.

Your Comments (209)

Comment Pages 7 of 21 pages « First  <  5 6 7 8 9 >  Last »

Nice one worked without a problem in FF and ie6.
Posted by Sahibinden on 07/01, 04:03 PM
great style but i just try the css not from js file.
thank you very much
Posted by Taksi on 07/01, 04:04 PM
I *would* also agree that this code is awesome, b/c I'm not making my index page into a CSS styled layout, and am having a *h* of a time with the columns all being the same length!! ahhh....
I'm wanting to see how well it works 1st... , and so I copied/pasted the code into the HEAD section, but of course without having downloaded that external file, I can't see the change...
I'm going to go out on a limb and make the sin of "assuming" that it's because I either 1) have to download that external file just to view it even though I don't have it uploaded to my server yet... or 2) wait until it's actually uploaded to the server first, cuz it won't work until it's a "published" page?
Thanks so much...
Posted by Kristy Kat on 07/05, 10:36 PM
How can i implement it with ajax?
Posted by web tasarım on 07/07, 11:57 AM
Thanks! I will try it in my web site.
Posted by hemşire on 07/07, 11:58 AM
any solution without javascript?
Posted by sistem on 07/07, 11:59 AM
I will develop an ajax versiyon!IF i success, i will write here again.
Posted by web tasarım on 07/07, 12:00 PM
I could not work it in Mozilla! Any suggestion?
Posted by hosting on 07/07, 12:02 PM
I have this working fine in IE6 but FF2 does not work at all. I notices a few other comments along these lines but no specific answers or solutions. Did I just miss them or does it not work in FF2.

Posted by Warren on 07/10, 09:51 PM
Nice script, but still a bit buggy?thank you all works. I like this page
Posted by Midi on 07/13, 05:48 PM

Comment Pages 7 of 21 pages « First  <  5 6 7 8 9 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2016 Dynamic Drive