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 21 of 21 pages « First  <  19 20 21

Sorry for misunderstanding some one added malicious code my JavaScript, hosted on my server, when i compare both file at that time I found some one added some malaises code in my file due to this reason it's detecting as virus. This file is not virus, again sorry for wrong information.
Posted by Asif Sarani on 05/11, 02:45 PM
Looks like some pretty impressive css work! Thanks for sharing how you did this. acai
Posted by Acai on 05/18, 11:19 AM
Resources like the one you mentioned here will be very useful to me. I will post a link to this page on my blog. I am sure my visiors will find that very useful. Genetic diseases
Posted by Genetic diseases on 05/23, 09:54 AM
i would like to say thanks for this magic script !!! i used it and it is fantastic and solve many problems, and it made me use css the same way i used tables in layout
Posted by Wasseem on 05/24, 04:26 PM
Thanks for the great script. Very Customizable
Posted by Juliet on 05/25, 05:40 PM
I need in a Drop down menu, When we hover at the menu, in that Sub Menu will be Back then the Input Bo. What is the Solution of that Problem.
Posted by Raju on 05/26, 11:01 AM
Thanks a lot for writing it.
Posted by sohbet on 05/27, 05:29 PM

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

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