I'm encountering an issue where one of my divs, content_wrap, is not adhering to the CSS property min-height:100%
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
</head>
<body>
<div id="header">
</div>
<div id="center_content_common">
<div id="menu_wrap">
</div>
<div id="content_wrap">
<div id="content_block">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html,body
{
padding:0px;
margin:0px;
font-family:"Trebuchet MS", Helvetica, sans-serif;
height:100%;
width:100%;
}
#header
{
width:100%;
height:15%;
background-image:url('../images/header_gradient.png');
background-repeat:repeat-y;
background-size:100% 100%;
border-bottom:3px solid #b8babc;
}
#center_content
{
min-height:79%;
height:auto;
background-image:url('../images/content_area_gradient.png');
background-repeat:repeat-x;
background-size:100% 100%;
overflow:auto;
}
#center_content_common
{
min-height:79%;
width:100%;
height:auto;
overflow:auto;
}
#content_wrap
{
min-height:500px;
width:84.5%;
float:right;
background-image:url('../images/content_area_gradient.png');
background-repeat:repeat-x;
background-size:100% 100%;
}
#content_block
{
min-height:100%;
width:100%;
margin:auto;
}
#menu_wrap
{
width:15%;
min-height:100%;
height:auto;
float:left;
}
#footer
{
height:5%;
width:100%;
background-image:url('../images/footer_gradient.png');
background-repeat:repeat-y;
background-size:100% 100%;
border-top:3px solid #b8babc;
}
What might be causing this CSS problem?