
The white background is supposed to go to the end of the page, since all of the other page elements are enclosed in it.
The Solution
I couldn't find a way to fix this problem using CSS/HTML alone. Instead I had to use a piece of javascript to resize the div to the actual height of the page.
<script type="text/javascript">
function resize()
{
document.getElementById('maindiv').style.height =
document.body.parentNode.scrollHeight + 'px';
}
</script>
Just let your body tag know that it should run the resize function onload and the result in IE 7 and 8 is as follows: