Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
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 20 of 21 pages « First  <  18 19 20 21 >

This was working in IE until I added floated div elements and absolutely positioned div elements. This is a very simple script (and old too). Just save yourself some time and go to http://www.paulbellows.com/getsmart/balance_columns/ to get something that works exactly the same way (just enter in your div id's) and it works a treat.
Posted by Nick on 04/03, 10:49 AM
it does the job, thx
Posted by Jasper on 04/08, 05:22 AM
I totally Agree with u,i really appreciate your posting,such a nice thinking.thanks for giving us such a nice information.
Posted by Lynn - Connecticut Personal Injury Lawyer on 04/08, 05:22 AM
That is some inspirational stuff… Never know that opinions could be this varied. Thanks for all the enthusiasm to offer such helpful information here.
Disk encryption software - Powerful encryption software with pre-boot authentication secures 100% of your hard disk drive, including the OS.
Posted by Disk encryption software on 04/08, 10:49 AM
hidrofor servisi
Posted by hidrofor on 04/08, 12:47 PM
hidrofor
Posted by hidrofor on 04/08, 12:48 PM
Great tool. It worked on IE6, but now we are developing in IE7 and it does not have the affect any longer. Same issue in Chrome, even Opera who likes to think it's IE :o) Any advice for getting this active for IE7 would be welcome. Thanks for the great site for all these years, we depend upon you a lot!

Regards.
Posted by Brandon on 04/13, 03:11 PM
Simple and straightfoward, thanks for making it easy!

Forex News
Posted by Forex News on 05/03, 12:22 AM
This is a nice script. Thanks for giving the codes. I'll try this one to one of my blogs.

Keep it up!

Norman
Posted by simple tell a friend script on 05/09, 03:26 PM
This Script detect as malware in avast antivirus Malware name [JS:Redirector-H4 - Trj]
Malware Type : Trojan Hours
http://www.avast.com/eng/vps-content-2009.html
Posted by Asif Sarani on 05/11, 09:15 AM

Comment Pages 20 of 21 pages « First  <  18 19 20 21 >

Commenting is not available in this weblog entry.
Sponsors

Advertise Here

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