auto div heights

[abhi4u]

Hi,

I need to design where div column adjusts its height with another div.
the design expected:- 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

[Wickham]

Items 17, 18 and 19 here
http://www.wickham43.net/firefoxbackground.php
show different methods.

If you have a containing div with a fixed width, the background image method in item 18 is fairly easy. The other methods involve complicated nesting of divs or extra divs with position: absolute behind the divs with content.