Footer is floating across div

Question

I have a container div with a footer div placed outside of it. First of all, my footer is across the screen and I don't want to use an "absolute" rule to position it. How do I place the footer right at the bottom of the page?

CSS Code:

#container{
margin:auto;
width:85%;
height:auto;
}
#header {
background-image: url('http://static.manpoints.uk.to/images/header.png');
background-repeat: repeat-x;
background-color: #dd4814;
height: 140px;
}
#footer{
background-image: url('http://static.manpoints.uk.to/images/gradient-grey.png');
background-repeat: repeat-x;
background-color: #F0F0F0;
padding: 15px;
margin-top: 30px;
height: 90px;
width: 100%;
position: relative;
} 
#content {
margin: 10px;
width: 75%;
height: 100%;
float: left;
}

HTML Code:

<div id="container">
<div id="header">
<div id="logo"><span>Earn Man Points<br>Earn Respect</span></div>
</div>
<div id="menubar" align="center">
<ul id="menu">
<li><?php menuIndex(); ?></li>
<li><?php menuUser(); ?></li>
<li><a href="/leaderboard/" title="View the ManPoints Leaderboard">Leaderboard</a><li>
<li><a href="/upload.php" title="Upload content to Man Points">Upload</a></li>
</ul>
</div>
<div id="content">
<h1>Title</h1>
<div id="image_display"><img src="img.jpg"></div>
<div id="image_info">
<h2>Man Points: 7</h2>
<p>Next Image</p>
</div>
</div>
</div>
<div id="footer">Footer Content</div>

Website with issue: http://manpoints.uk.to/image/30

Answer 1

Add

clear: both;

to the footer element. Its because the content above it is floated and hasn't been cleared.