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

awesome script, can't wait to use it on my next project!
Posted by CSS Menus on 11/03, 04:09 PM
Great script, but when IE (6) gets a hold of it.... it goes into some continous loop. I tried to see where... but alas... I am not sure why. Anyone else seeing this?

Otherwise.. it works great on the "good" browsers. :-)
Posted by Michael on 11/03, 05:34 PM
Hi Michael:
I observed the "loop" in IE6, but only in certain layout scenarios, and non when used on the layouts on DD CSS Library. What CSS layout did you use this script on that the "looping" occurred?

Just FYI, it's not actually a loop, just the script being called incessantly in IE6 per the setTimeout() function in this odd scenarios instead of only when the window actually resizes (to recalculate the columns widths). It seems under such situations, IE6 fires "window.onresize" whenever you alter the columns widths. This versus a loop, which would in fact crash the browser. In this case, the worst case scenario is simply that the script won't exactly be running at optimal efficiency in IE6.

I plan on updating the script soon to account for these odd layout scenarios where the issue occurs in IE6.
Posted by ddadmin on 11/03, 11:19 PM
I'm only testing (not implementing yet), but it doesn't seem to work with FF2 and IE7?
Posted by treespotter on 11/04, 04:18 AM

its a custom layout. I have a messy work-around for now... and will anxiously wait for your update. :-)

Posted by Michael on 11/04, 03:04 PM
Thanks, a real life saver. Because of this script I am going to know code my websites in XHTML rather than HTML with tables as I wanted to achieve equal hight columns. Thanks a lot!
Posted by Steven on 11/09, 10:40 PM
Not to take away from the work that was done here... but because of the IE problems I was seeing (not using the layouts here), i decided to use prototype to do the dirty work for me.

I setup a conditional since the panels can change (2panel/3panel) depending on layout inaddition to offesetting the size of one column for layout reasons. But otherwise really straight forward... and since I am already using prototype... no need to link additional code.

Sorry its sloppy.. but here it is.

function equalizePanels() {
var col = $('content-navigation-panel');
var tbx = $('content-right-toolbar');
if(tbx && (Element.getHeight(col) < Element.getHeight(tbx))) { = Element.getHeight(tbx) + 'px';
} else if(tbx && (Element.getHeight(col) > Element.getHeight(tbx))) { = Element.getHeight(col)-25 + 'px';
} else {
var el = $('content'); = Element.getHeight(el) + 'px';
Posted by Michael on 11/09, 10:54 PM
Hi Michael:
The problem with this script and IE6 right now seems to be with CSS layouts that use absolute positioning (non of the layouts offered here do). I may be wrong, though at a glance I believe the problem is with IE6 mis-firing the onresize event handler whenever an absolutely positioned element is resized, instead of when the window is truly resized by the user. So whenever the script attempts to adjust one of the columns, the script runs, and a cycle (not loop) is formed. I was hoping for a simple fix, but it looks it will not be so straightforward. Once I have more time I'll see what can be done.

Is your custom layout based on absolute positioning for any of its main columns?
Posted by ddadmin on 11/09, 11:42 PM
I dont use absolute (dont even define relative) in my layout.. so it might be more then that. I never looked deep into the script nor am I a full time js developer (I am a former PM who is doing freelance dev work - scary!!)

There are though a few IE hacks... but only using * HTML to fix sizing issues. the css is pretty straight forward.
Posted by Michael on 11/09, 11:50 PM
Ok. If you have a URL to your layout, please post it here. It might come in handy when I debug the issue.
Posted by ddadmin on 11/10, 12:15 AM

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

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