I am struggling to figure out why some of my DIVs are not expanding to match the height of my "content" DIV. It must be resolved using only CSS and HTML.
HIERARCHY
-[+]wrapper
----[-]left (will contain navigation bar)
----[-]right (used for centering the "center" div, may have content)
----[-]center (page center containing main content)
--------[o]header (small line of text)
--------[o]content (should expand all other heights when overflowing)
----[-]footer (resource & contact links, always at bottom)
CSS
*{
font-family: Arial Black,Arial Bold,Gadget,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 400;
border:0px;
margin:0px;
padding:0px;
}
.wrapper{
position:absolute;
width:100%;
height:100%;
background-color:black;
}
.left{
position:absolute;
left:0px;
width:220px;
height:100%;
background-color:red;
}
.right{
position:absolute;
right:0px;
width:220px;
height:100%;
background-color:blue;
}
.center{
position:absolute;
right:220px;
left:220px;
background-color:yellow;
}
#header{
float:left;
height:40px;
width:100%;
background-color:silver;
}
#footer{
position:absolute;
bottom:0px;
height:20px;
width:100%;
background-color:silver;
}
#content{
float:left;
top:40px;
bottom:20px;
margin:20px;
background-color:orange;
}
HTML
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
View the code on JFIDDLE here: JFIDDLE