Using CSS to Style Dynamic Content on Website

I am trying to create a website that is styled using DIVs.

The header and footer seem to be working ok. The problem is that the content div cannot be scrolled down. It is just cut off at the end and the footer placed on top of it.

Suggestions would be greatly appreciated.

<div class="main">
                <div class="header">
                    ...header code
                </div>
                <div class="content">
                    ...this html is dynamic
                </div>
                <div class="footer">
                    <p>footer text</p>
                </div>
</div>
 
 
 
CSS Classes:
 
 
body
{
	margin: 0;
	padding: 0;
	height: 100%;
	overflow:auto;
}
html
{
	height: 100%;
	overflow: hidden;
}
#bg 
{
	position:fixed; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
}
.header
{
	z-index: 100;
	background-color: #303030;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 40px;
	clear: both;
}
.main
{
	z-index: 100;
	background-image: url('/Images/background.gif');
	background-repeat: repeat-x;
	position: relative;
	top: 0;
	left:0;
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	color: #FFFFFF;
}
.content
{
	z-index: 101;
	position: absolute;
	top: 41px;
}
.footer
{
	z-index: 100;
	position: absolute;
	bottom: 0;
	right: 45%;	
}
.footer p
{
	margin: 0;
	padding: 0;
	font-family: verdana;
	color: #808080;
	font-weight: bold;
	text-align: center;
	font-size: x-small;
	text-decoration: none;
}
.footer p a:link 
{ 
	color: #808080;
	text-decoration: none;
}
.footer p a:visited 
{ 
	color: #808080;
	text-decoration: none;
}
.footer p a:hover
{
	color: #808080;
	text-decoration: underline;
	font-weight: bold;
}
.footer p a:active 
{ 
	color: #808080;
	text-decoration: none;
}

Select allOpen in new window

Disaster.gif