Auto Adjust height of column on right

I would use something like jquery

You can do this in a variety of ways. Are you opposed to Jquery/Javascript or do you want a pure CSS solution?

Pure CSS:  http://abcoder.com/wp-content/uploads/2009/09/css-equal-height-three-column-layout-with-bottom-border-fix.html

Jquery: http://abcoder.com/wp-content/uploads/2009/09/three-column-layout-js-equal-height.html

Not opposed to jquery but would prefer a css solution

The link for css does not have the code, it only shows what the end result looks like

View the source:

div.eW { overflow:hidden; }
div.eW.eB { height:1px; font-size:0; }
div.eW div.eH { float:left; width:30%; background-color:#9F0; margin-right:5px; padding:10px; padding-bottom:9010px; margin-bottom:-9000px; border:1px solid #000; }

Select allOpen in new window

What browser are you programming for.  Sometimes a css solution may not be compatible with the browser.

I just noticed your using a strict Doctype. In the link I provided he's using a transitional. This will also effect the way the browser interprets the CSS.  We may want to look at the Jquery/JS solution.

$('#right_content').height($('#left_content_middle').height());

using jquery

I am looking at cross browser support mainly FF, Ie, Chrome ... support for older versions of these browsers as well(ie 6 as well if possible)


I'm not proficient with css, so can you please explain me how that css code that you provided works


Are these 3 different divs , the last 2 inheriting any properties from the first one?

div.eW

div.eW.eB

div.eW div.eH


I'd look at Jquery but if the Javascript support is turned off for the browser it won't work.

If JS is turned off on the browser, they probably won't be browsing your site anyways. Better than 90% of users have JS on with some protection on the OS or browser side of things.

To answer your question though what they are doing is using a large amount of padding-bottom as well as margin-bottom. (the same amount actually).  Then your parent div, will have overflow:hidden to hide anything that won't have actual content.

LZ1 is correct.  In my opinion jquery is your best cross browser solution.

Thanks,  i'll try out the above stuff and let you people know how it goes