Dynamic Drive Blog- CSS Equal Columns Height script (v1.01)

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Last commented:

Dynamic Drive Blog Here

CSS Equal Columns Height script (v1.01)

Date: 11/02/2006 | By ddadmin | Comments: 176 Comment on this entry

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:

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 (176)

Comment Pages 14 of 18 pages « First < 12 13 14 15 16 > Last »

else {
var el = $('content');
col.style.height = Element.getHeight(el) + 'px';
}

Posted by araba on 11/16, 11:36 PM

Awesome little script.. just what the doctor ordered.. thanks!

Posted by Jon on 11/17, 07:48 AM

Thanks for the script! It helps me understand more about CSS columns...

Junior
[url="http://www.goodtolove.com"]
www.goodtolove.com
[/url]

Posted by Junior on 12/03, 07:28 PM

Thanks! I've been looking for that solution !

Posted by Web Design Ireland on 12/08, 12:36 PM

I needed a script that would give equal height to columns regardless of how much content was there *AND* push the footer to the bottom of the users monitor regardless of screen resolution. I followed the advice found here and the only browser it worked properly in was Opera. IE7 was a total joke, as it appeared to be caught in some kind of loop and the footer just keeps going further and further down the screen. With FF2 and Safari, it only takes up 1/2 the screen. Isn't there a script that will keep the footer at the bottom of the monitor regardless of resolution and give equal column height also regardless of the amount of info? Or is this too much to ask? Maybe CSS4???

Posted by Nizertop on 12/10, 01:50 AM

Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!

Posted by suahib on 12/12, 02:26 AM

thank u for the codes .I've been searching a long time for this

Posted by çadır on 12/12, 04:09 AM

Many, many thanks for script.
And greetings from Poland! :)

Posted by mieszkania warszawa on 12/14, 05:30 PM

I using the equal column,and i also using a box at the contentwrapper/contentcolumn, but when using equal column, the box dun move to center, it stay on the left side...

Posted by ark on 12/15, 04:42 AM

ah, and one more thing, in FireFox it ok, but in IE7 it stick to left(the box(containers)).

Posted by ark on 12/15, 04:45 AM

Comment Pages 14 of 18 pages « First < 12 13 14 15 16 > Last »