auto div heights

[abhi4u]

Hi,

I need to design where div column adjusts its height with another div.
the design expected:- attached expected.jpg
where left and right sidebar should adjust their height to contents height.


the code


<div id="container2">
<div id="vmenu">
<p>Content for id "vmenu" Goes Here</p>
</div>
<div id="loginmenu">
<?php include("login.php"); ?>
</div>
<div id="content">
<p>Content for id "content" Goes Here</p>
</div>
</div>


.css code

#container2 {
background-color: #FFF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
margin-top: -1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
white-space: normal;
height: auto;
width: 942px;
display: block;
overflow: auto;
}
#vmenu {
width: 130px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
padding: 10px;
height:auto;
display: block;
}
#loginmenu {
width: 180px;
margin-right: auto;
margin-left: auto;
background-color: #cccccc;
padding: 10px;
height:auto;
}



......
vmenu - left sidebar
loginmenu - right sidebar

 

[johnscott]

use height:100% instead of auto...this should set your left/right menu divs to 100% of their parents...which is your #container2

Please let me know if that worked.

 

[PixelPusher]

Using 100% height:

When applying 100% height to an element you must also apply it to its parent. If you do not, the child element has no reference as to what 100% is. 100% of what? make sense? What I have done in the past is apply 100% height to the body.

In reference to your column diagram below,
to get the middle div to adjust in height with the left and right divs, place the L/R divs inside the middle one. This way as they grow in height they will push the height of the middle div. You will need to use positioning/floats and overflow in your css.

Let me know if you need help.