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

Hi, I'm trying to get this code to work on two sets of columns on one page.

One has 2 columns and then in another row below it there are 3. The 2 need to be the same height as each other and then independently the 3 columns need to match each other also.
Posted by paul on 04/11, 04:09 PM
Paul, Do you have an example of what you have now? Someone may be able to help you if they see it. I may have an idea but I kinda want to see what you have first to make sure I'm on the right page.
Posted by Jim on 04/11, 04:35 PM
Hey yeah, I have fixed it currently by using the project seven version of this script on the 3 column area and this script on the 2 column area.
http://www.codethirteen.com/studio/1

is the preview of what I making, it's a very rough version, but the layout looks like I want it so far.

thank you.
Posted by paul on 04/11, 08:01 PM
copy and paste this- http://gbarnett.pbwiki.com/f/css_layout_dimensions.png


Can anyone write the code for that. I know how to make each of the boxes, with the curve edges, that's no problem, but how to lay the whole thing out is my problem. Please let me know if you can write the code for this. Thanks.
Posted by 3ripleB on 04/16, 03:32 PM
thanks a lot for the info, I will try to apply this..
Posted by Özel Ders Eğitim Kurs on 04/17, 02:56 PM
Wow--this is perfect! and easier to use than the other scripts I found.

I'm still fairly new to css and couldn't figure out why I couldn't get my column heights to even out. I assumed there was something wrong with my css. Glad it wasn't my css, but too bad I wasted a lot of time trying to "fix" it!
Posted by Tracy on 04/19, 10:34 AM
it's like people don't see anymore. I said i need help writing a code for the CSS layout on this webpage:

http://gbarnett.pbwiki.com/f/css_layout_dimensions.png
Posted by 3trippleB on 04/19, 09:48 PM
In response to 3trippleB, use the contact form on my site to email me and I can help you.
Posted by paul on 04/20, 02:40 AM
This script solved my column issues beautifully. However in the desire to be accessible, our team has come up with a problem. When you use the Firefox zoom in key command, the text enlarges below the columns and into the background. The text is then unreadable. If you refresh the page, the script redraws the column to the correct height for the new, larger text. But I don't know how to trgger a page refresh when someone uses zoom.

I tried substituting the line of code (Posted by ddadmin on 11/20) to cause the script to run constantly, but it didn't solve the problem.

Any ideas?
Thanks.
Posted by Lani on 04/30, 01:02 PM
Sorry I forgot to add a link to one of our test pages:
http://www.media.utah.edu/redStyle/index_test_red.html

Lani
Posted by Lani on 04/30, 01:41 PM

Comment Pages 4 of 21 pages « First  <  2 3 4 5 6 >  Last »

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.