Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:
Last commented:

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

There is a way to do this with pure css. If you guys would like to look at the article please go to http://alistapart.com/articles/holygrail
Posted by Matt on 12/17, 01:55 AM
Another bookmark made...
Posted by roScripts on 12/23, 01:48 PM
Here's a way to extend the columns to the full screen if you don't have enough content to fill the screen and want the footer to appear at the bottom of the screen rather than at the end of the content (mid-way down the screen).

Change:
var tallest=0;
to:
var tallest=document.body.clientHeight;

If your content extends past the screen height, then tallest is replaced with the height of that div.

I'm making a second post to extend the script further to subtract out header & footer height and body padding so the footer doesn't unnecessarily extend past the bottom of the screen when your content is minimal.
Posted by Jim on 02/20, 03:58 PM
As promised, here is code to account for the height of headers and footers and top & bottom padding in the body of your stylesheet (because I had some in my site).
After:
ddequalcolumns.columnswatch=["leftcolumn""rightcolumn""contentwrapper"

Insert:
//Input IDs of Top and Bottom rows (Header and Footer)
ddequalcolumns.rowswatch=["top""footer"

After:
ddequalcolumns.setHeights=function(reset)

Insert:
//Calculate total height of header and footer save in variable t, why t?.  Good Question.
t=0;
for (var 
j=0j<this.rowswatch.lengthj++){
if (document.getElementById(this.rowswatch[j])!=null){
var ptop document.getElementById(this.rowswatch[j]).offsetHeight;
var 
ptop;
}
}

//Get padding (top and bottom) set for the body in stylesheet
pad=0
var RefDiv document.body;
if( 
window.getComputedStyle {
  
var tpad getComputedStyle(RefDiv,null).getPropertyValue("padding-top");
var 
bpad getComputedStyle(RefDiv,null).getPropertyValue("padding-bottom");
else if( RefDiv.currentStyle {
  
var tpad RefDiv.currentStyle.paddingTop;
var 
bpad RefDiv.currentStyle.paddingBottom;
}
bpad
=parseInt(bpad);
tpad=parseInt(tpad);
pad bpad+tpad;

//Set tallest to screen height minus header, footer, and any body padding (top and bottom) 

Replace:
var tallest=0

With:
var tallest=document.body.clientHeight-t-pad


Works in IE, FF, Opera, FF(Mac)

If someone has a better way, post it. Since I'm not much of a javascript guy, I'm sure it can be improved upon.
Enjoy
Posted by Jim on 02/20, 04:10 PM
plz tel me hw to hack n e account.... as i need it urgently... plz contact me on my mail id...
Posted by Bhavya jain on 03/03, 04:17 PM
Working beautifully in IE& and I've been looking at equal columns stuff a lot trying to solve my desire for expandable menus, however it doesn't seem to be working in FF2. Did I miss something or is there a FF fix? Thanks much.
Posted by Rick Stringer-Hye on 03/05, 05:10 PM
This script is preety cool!
Posted by Beatbox on 03/13, 05:34 AM
I am trying to use this script together with AJAX which loads external page into one of the columns (div). I need to have this script to readjust the column heights on loading the ext page, or just be always running. Thanks!
Posted by Peter on 03/18, 06:58 AM
Sorry for the above 2 posts....

Where ever you have your stateChanged function that passes your information back to populate the columns. ie:
document.getElementById("column1").innerHTML=xmlHttp.responseText 

add this afterwards:
ddequalcolumns.setHeights(); 


It works for me.
Posted by Jim on 03/19, 12:57 PM
great style but i just try the css not from js file.
I still can't understand javascript, forgive me.
Posted by andi on 03/20, 12:06 AM

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

Commenting is not available in this weblog entry.
Sponsors

Advertise Here

Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.