Set height of <div> = to height of another <div> through .css

Question

I have two <div> elements. Right now my simplified .css is thus:

#leftdiv {     /*this is the navigation pane*/     min-height: 600px;     max-height: 600px; } #rightdiv {     /*this is the primary pane*/     min-height: 600px;     max-height: 600px;     overflow-y: auto; } 

I've set a hard min- and max-heights for both so they keep the same height, and if content overflows out of the #rightdiv, a scrollbar appears. I'd like this scrollbar to be gone and having the #rightdiv and #leftdiv stretch to fit the contents of the #rightdiv. I want the whole site to stretch height-wise to fit the contents, but if I remove the overflow-y: auto; from my .css and remove the max-heights, the #rightdiv stretches, but the #leftdiv doesn't, yielding some truly ugly design.

I'd like something like the below:

#leftdiv {     min-height: equal to #rightdiv height if #rightdiv is taller, else 600px; } #rightdiv {     min-height: equal to #leftdiv height if #leftdiv is taller, else 600px; } 

How would I go about setting the min-height of both like this?

Answer 1

If you don't care for IE6 and IE7 users, simply use display: table-cell for your divs:

demo

Note the use of wrapper with display: table.

For IE6/IE7 users - if you have them - you'll probably need to fallback to Javascript.