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.

Answer 2

I am assuming that you have used height attribute at both so i am comparing it with a height left do it with JavaScript.

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Another idea can be found here HTML/CSS: Making two floating divs the same height.

Answer 3

If you're open to using javascript then you can get the property on an element like this: document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

And you can set the attribute on an element like this: .setAttribute('style','max-height:'+heightVariable+';');

Note: if you're simply looking to set both element's max-height property in one line, you can do so like this:

#leftdiv,#rightdiv
{
    min-height: 600px;   
}

Answer 4

It seems like what you're looking for is a variant on the CSS Holy Grail Layout, but in two columns. Check out the resources at this answer for more information.

Answer 5

You would certainly benefit from using a responsive framework for your project. It would save you a good amount of headaches. However, seeing the structure of your HTML I would do the following:

Please check the example: http://jsfiddle.net/xLA4q/

HTML:

<div class="nav-content-wrapper">
 <div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div>
 <div class="content">asd as dad ads ads ads ad ads das ad sad</div>
</div>

CSS:

.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;}
.left-nav{float:left;width:30%;height:inherit;}
.content{float:left;width:70%;height:inherit;}