Problem in setting footer when content extends page length

[Kshitiz Agarwal]

Hi,

I am having problems in setting footer at the bottom of page when its content goes beyond window's height. The footer tends to over lap the content. Here is the code:

<div class="container">
			<div class="about">
// content over here
			</div>

		</div>
		<div class="footer">
			<p align="center">
				<font face="Helvetica" color="white" size="2">© 2012
				WalknShine. All Rights Reserved </font>
			</p>
		</div>

The css is :

.about {
	position: absolute;
	left: 0%;
	top: 40px;
	width: 100%;
	padding: 5px;
	overflow: auto;
	padding-bottom: 30px;
}

.footer {
	position: relative;
	right: 0px;
	left: 0px;
	height: 30px;
	margin-top: -30px;
	min-width: 980px;
	background-color: black;
}

.container {
	min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

Please help me here...I am really stuck....