It's frustrating that everything in the 'wrapper' won't stretch to fit properly, instead staying at a fixed height. I'm trying to make the 'sidebar' and 'content' inside the area have the same height at all times, with the 'content' stretching to match the 'wrapper'. I also want to include a 'header', 'nav', and 'footer'. Despite my efforts, nothing seems to be working. I had it right once, but lost the code and now I can't figure it out again. Help?
I was experimenting with changing the 'wrapper's min-height, which is why it appears so low.
To clarify, I need the 'wrapper' to contain everything inside it and adjust its height when one of the children elements increases in height. For example, if 'inside' has more content, it should increase the height of 'content'. Additionally, I want 'sidebar' and 'inside' to always have equal heights as specified by their CSS properties.
HTML:
#wrapper {
width: 1000px;
min-height: 300px;
background-color: red;
position: relative;
margin: auto;
margin-bottom: 10px;
border: 1px solid black;
}
#header {
width: 100%;
background-color: blue;
height: 100px;
float: left;
clear: both;
position: relative;
border-bottom: 1px solid black;
}
#content {
width: 100%;
background-color: grey;
height: 100%;
float: left;
clear: both;
position: relative;
}
#sidebar {
width: 180px;
background-color: green;
float: left;
position: absolute;
top: 0px;
bottom: 0px;
padding: 10px;
border-right: 1px solid black;
}
#inside {
width: 779px;
padding: 10px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
background-color: orange;
float: right;
}
#footer {
width: 100%;
height: 100px;
float: left;
clear: both;
background-color: pink;
border-top: 1px solid black;
}
#nav {
width: 100%;
border-bottom: 1px solid black;
float: left;
clear: both;
height: 20px;
background-color: purple;
}<div id="wrapper">
<div id="header">
hi
</div>
<div id="nav">
hi
</div>
<div id="content">
<div id="sidebar">
sidebar stuff
</div>
<div id="inside">
inside stuff
</div>
</div>
<div id="footer">
hi
</div>
</div>