My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure:
<div id="container">
<div id="header">
</div>
<div id="nav">
placeholder for navigation
</div>
<div id="main-content">
<div id="sidebar">
some sidebar content like login form
</div>
</div>
</div>
Here is the relevant CSS code snippet:
#container {
width: 900px;
margin: 0 auto;
padding-bottom: 80px;
}
#header {
height: 160px;
width: 100%;
}
#nav {
width: 100%;
height: 40px;
}
#sidebar {
float: right;
width: 140px;
height: 100%;
}
#main-content {
width: 900px;
}
The sidebar, set to have a height of 100%, overflows outside the container div as seen on