I need help with a small CSS/HTML question. 10pts for best answer?

Tell me what I'm doing wrong, i want the bottom of the container to be touching the bottom of the browser window and have no idea how to do this… Please help as i have tried everything, thanks :)
<html>
<head>
<style type="text/css>
body
{
background-color: #cccccc;
}
#container
{
background: white;
width: 800px;
margin: 0px auto;
margin-top: -8px;
border-left: 3px solid black;
border-right: 3px solid black;
border-top: 3px solid black;
border-bottom: 3px solid black;
}
</style>
</head>

<body>
<div id="container">
This is the content
</div>
</body>
</html>


Thats all of the base code for the page, so how can I make it that the container will touch the bottom of the browser window instead of just going as far as the content goes(where it says "This is the content")
I have taken a look at the overflow property, padding, even margin properties. Nothing I have found works yet. Any ideas would be greatly appreciated, although I would like to use CSS to do this instead of JS(unless it's the only thing i can do to get this to work).
Thanks, best answer to the first that solves what I need!
 
Back
Top