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

Awesome!! It works great on my website: www.rahulgladwin.com
Posted by Rahul on 10/09, 09:14 AM
Never mind. I had to remove this code from my website; it doesn't work in MSIE 6.0. I found another code elsewhere.
Posted by Rahul on 10/09, 12:49 PM
I am applying your wonderful script to a 3col layout from the templates that come with Dreawearver CS3. It works great with IE7, but does not work at all with Firefox 3.03, Google Chrome 0.2.149.30, or Safari (Mac). Any help?

Thanks
Posted by Donald Moore on 10/10, 11:34 AM
Pretty darn good if you ask me... thanks for the script.
Posted by Pretty good on 10/14, 01:43 PM
I don't know JS but I have been trying to implement this script on my page. The script is amazing... until I add padding to my columns. The moment I add padding, some of the columns become unequal by that padding amount. Does anyone know how to fix this problem?
Posted by Thomas Moxham on 03/17, 03:38 AM
Hi,
I am showing one image in web application, in that image shape is Square type. I want to show the image in edge set the light curve using css.

Any bodies know that logic send me my mail id.
maniraj.p@invictustech.net
Posted by Maniraj on 03/21, 04:30 AM
I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business. buy viagra; viagra grneric;
cialis online; order cialis; online cialis; buy cheap cialis;
Posted by Discount Viagra on 03/23, 06:08 AM
I am not really sure if best practices have emerged around things like that, but I am sure that your great job is clearly identified. I was wondering if you offer any subscription to your RSS feeds as I would be very interested and can't find any link to subscribe here. Lifelock CEO hacked
Posted by Lifelock safe on 03/27, 06:14 AM
I read your content your blog, This content is very unique and emprassive.
Acai Berry
Posted by Alisha on 03/30, 11:02 PM
Thanks
Posted by 2.el eşya on 03/31, 07:59 AM

Comment Pages 19 of 21 pages « First  <  17 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.