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 5 of 21 pages « First  <  3 4 5 6 7 >  Last »

i want static menu ( horizontal dropdown menu)? where is this
Posted by rulman on 05/03, 07:51 PM
thank you all works. ilike this page
Posted by web tasarým on 05/04, 11:18 AM
I love you I love you .... I may even have your babies!!!!!

I have been struggling with a left column background being blue for the past week...

Many thanks you are a live saver not to mention my sanity!!!
Posted by alison on 05/06, 06:19 AM
For some reason this still isn't working for me. Do I have to externalize my css code in a separate file in order for it to work? (sorry I'm new at this)
Posted by kkr4500 on 05/09, 09:24 PM
This is very, very cool. Works beautifully in IE and Firefox. Don't have Opera or a Mac, so I'm hoping it works there. Thank you. I'll have an attribution and a link up soon.
Posted by Max Black on 05/10, 02:59 AM
Ok, so I still can't seem to get this to work. I noticed in the javascript that this applies to the left and right columns, but I and only dealing with a two column layout. (left and content) I changed the right column in the javascript to contentcolumn, but it still doesn't seem to have an effect. Any help would be appreciated.
Posted by kkr4500 on 05/10, 06:01 PM
Hi! Since i had the problem that when i resized the window the layout would mess up a little, i used the javascript ddadmin recommended that replaces the two last lines of the code to:

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

OK that went great. However, since there was no conent on my left column, and very little content on my right column, the layout simply adjusted itself to the little content there was, both columns same height alright, though i needed to fill the entire browser window regardless of content. So i used a little trick which does work for me but i don't know if this is cheating. I added to the css a hight declaration as follows:

float: left;
width: 100px; /*Width of right column in pixels*/
height: 580px; [B]I ADDED THIS HERE[/B]
margin-left: -100px; /*Set left margin to -(RightColumnWidth) */
background: #FF6600;

float: left;
width: 100%;
background: #444;

Now both sides are forced to this height value regardless of content. Is this a cheap cheat or a strike of genius? I'm an entry level css adopter...
Posted by Mixelle on 05/18, 09:01 PM
Thanks, it's very useful. great job!!! I wish for your success always
Posted by orangedan75 on 05/28, 08:10 AM
This script solved my column issues beautifully. However in the desire to be accessible, our team has come up with a problem. When you use the Firefox zoom in key command, the text enlarges below the columns and into the background. The text is then unreadable. If you refresh the page, the script redraws the column to the correct height for the new, larger text. But I don't know how to trgger a page refresh when someone uses zoom.

Thanks. Thanks
Posted by Santhish on 05/29, 10:15 AM
Yes, this is buggy in IE6, it continually loops therefore not practical to use. If anyone could provide a fix for IE6 then I'd probably use this script ;)

Posted by Kezzer on 05/29, 12:06 PM

Comment Pages 5 of 21 pages « First  <  3 4 5 6 7 >  Last »

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