Was wondering if anyone was able to help me here.

I have a problem with my content overflowing past the end of the content div and past the footer. The footer is meant to sit at the bottom of the page, however it just doesnt seem to work...

CSS CODE:
Code:
BODY, html{
	background-color:#12499f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	
}
table{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 24px;
}
#content {
	float: right;
	width: 719px;
		
}
#footer{
	
	width: 1000px;
	height:154px;
	background-image:url("images/layout/footer.gif");
	background-repeat:no-repeat;
	margin-left:auto;
	margin-right:auto;
	clear:both;
}
#navigation {
	width: 231px;
	height:576px;
	background-image:url("images/layout/menu.gif");
	border-right: solid 1px #ec1c24;
	
}
#header{
	width:959px;
	background-image:url("images/layout/buzzWord.gif");
	background-repeat:no-repeat;
	height:166px;
	margin-bottom:15px;
}

#container{
	width:960px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

#main{
	background-color:#FFFFFF;
	padding-top:30px;
	clear:both;
	display:block;
	overflow: hidden;
}
.pageTitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #12499f;
}
HTML :
HTML Code:
<link href="buzzStyles.css" rel="stylesheet" type="text/css" />
<div id="container"> 
<div id="header"></div>

<div id="main">
  <div id="content">{include file='content.tpl'}<br />

</div>
		<div id="navigation"></div>
	
</div>


</div>
<div id="footer"> </div>
Any help would be great, i have spent ages on this