Hi, I'm designing a site that has multiple divs within in each other, and I'm trying to get a div to stretch the length of the content that's in a div within in.

The html looks like this:
<html>
<body>
<div id="pagewidth">
<div id="maincontent">
<p>the content goes here</p>
</div>
</div>
</body>
</html>



The CSS looks like this:
body, html {
height: 100%;
}
#pagewidth {
height: 100%;
width: 875px;
margin-top: 50px;
margin-bottom: -200px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
clear: both;
background-color: black;
}
html>body #pagewidth {
min-height: 100%;
height: auto;
}
#maincontent{
position: absolute; top: 260px;
float: none;
clear: both;
width: 750px;
margin-left: 30px;
margin-right: auto;
margin-top: 70px;
margin-bottom: 70px;
padding: 30px;
background-color: white;
}


So the #pagewidth div is supposed to form a kind of frame around the #maincontent div. As you can see, I've tried using min-height: 100%, height: 100%, but #pagewidth does not stretch when the content exceeds the capacity of the browser window - it pretty much stops where the window stops.

(I also tried just doing "min-height: 100%; height: auto;" in the #pagewidth div instead of in "html>body #pagewidth". Neither works.)

How can I get that div to stretch to fill 100% of the page?