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 2 of 21 pages  <  1 2 3 4 >  Last »

is it possible to use more than one instance of the script on one page? it seems that if I create a copy under a different name to fix the height of another set of columns, the first set goes back to its idle form (each column height is as large as the contents makes it)
Posted by aga on 11/13, 12:13 AM
The only problem I have is that if somebody has JavaScript disabled my site will look terrible, there should be an alternative as well in CSS that achieves the same effect.

But nonetheless it is a perfect alternative to people like me who don't know extensive CSS information to get "equal hight columns"
Posted by Steven on 11/13, 04:01 PM
This is what I've been looking for. Thanks a lot.
Is there a way I can force a resize / refresh. One of my columns (of two) has some 'rolled up' text that expands and contracts on a mouseclick. The initial state is rolled up and when expanded the adjacent column correctly matches the new height. However when I then collapse the data the adjacent column remains at the full size, I need to make the equal height script run again to re-size. So unlike some of the above comments I do want an on-resize action (I think).
Posted by Neil on 11/20, 01:21 AM
Awesome, been looking for ways to make all columns even on a css-based layout. Will use this a lot I am sure!
Posted by Michelle on 11/20, 03:36 PM
The easiest way to constantly have the script watch for changes to the columns' widths and react appropriately is have it run on a timer and periodically, instead of just when the page has loaded/ resized. I see this is how some similar scripts out there do it. What you sacrifice is some efficiency. To do this, change the last two lines of the script to just:

ddequalcolumns.dotask(window, function(){setInterval("ddequalcolumns.setHeights()"100)}"load"

The script will now run in the background constantly.
Posted by ddadmin on 11/21, 03:10 AM
Nice script, but still a bit buggy?
Posted by Thinkbasic on 11/22, 11:34 AM
while looking for this i came acrost this

Posted by Justin Beaird on 11/24, 06:31 AM
Thanks man, just what I was looking for. Worked like a charm :)
Posted by Davi on 11/26, 11:53 PM
You can get around having to fix the float column height equality by using a background image on the container. But obviously there are cases where this fix can be used.
Posted by Jez on 11/30, 01:01 PM

very sorry for such a long absence. I wanted to let you know that I my previous post was not 100% accurate. I had forgottent that I had placed some display:static properites in the CSS. I am sure that is what caused some of the problem.... if you still want to see the CSS, let me know and I will email it over. Its a bit sloppy... but all there for you viewing.

Posted by Michael on 12/09, 07:20 PM

Comment Pages 2 of 21 pages  <  1 2 3 4 >  Last »

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