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

Great CSS Library, loved your article, you could have talked more about the new CSS Library, anyway, I'm waiting for other great articles from you! Thanks!
Posted by andrew on 05/29, 07:17 AM
Thanks, that script is a lifesaver! I've been hunting for something like this forever!

Thanks again!
Posted by Ruth on 05/30, 09:51 PM
You can have same height with a simple css hack.
The div with let's say two columns have this:

/* same height cols */
padding-bottom: 32767px;
margin-bottom: -32767px;

Anyone used it? :)
Posted by Catalin on 06/13, 03:45 AM
Hello,

I have this script running on a page. Unfortunately, it will only draw to the viewport dimensions (allows scrolling, but that is due to the header displacement).

It doesn't seem to sit friendly on a page with a very large div to set the height to. Apart from that, it works fine ;)
Posted by dan on 06/25, 05:30 AM
Ahh, I was stupid.

Was trying to equalise to the wrong div.

How stupid am I? (please don't answer)

Thanks for the fine script ;)
Posted by dan on 06/25, 06:09 AM
Nice one worked without a hitch in FF and ie6.
Posted by shols on 06/26, 04:56 AM
hey thnx for the fine script really love it
Posted by dee on 06/28, 03:18 PM
Really like the "Center" of this page and would like to use it on Our Home Owner's Association Blog Page one the right side of of page in an Iframe. Is it posted anywhere on Dynamic Drive? If so where have looked but couldn't find it.

Would like to have the Form w/o URL or submit the word you see below in the script. The area it will be used in is password protected and only for the members of our HOA.
Posted by Gail Shreiner on 06/30, 03:08 PM
Thank you very much for this work.
Realy great job.
Posted by Yarn on 07/01, 09:38 AM
A preety cool script!

Regards
Posted by Peyzaj on 07/01, 09:42 AM

Comment Pages 6 of 21 pages « First  <  4 5 6 7 8 >  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.