title: Footer is floating across div
body: <p>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?</p>
  
  <p>CSS Code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="header"&gt;
  &lt;div id="logo"&gt;&lt;span&gt;Earn Man Points&lt;br&gt;Earn Respect&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="menubar" align="center"&gt;
  &lt;ul id="menu"&gt;
  &lt;li&gt;&lt;?php menuIndex(); ?&gt;&lt;/li&gt;
  &lt;li&gt;&lt;?php menuUser(); ?&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/leaderboard/" title="View the ManPoints Leaderboard"&gt;Leaderboard&lt;/a&gt;&lt;li&gt;
  &lt;li&gt;&lt;a href="/upload.php" title="Upload content to Man Points"&gt;Upload&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  &lt;h1&gt;Title&lt;/h1&gt;
  &lt;div id="image_display"&gt;&lt;img src="img.jpg"&gt;&lt;/div&gt;
  &lt;div id="image_info"&gt;
  &lt;h2&gt;Man Points: 7&lt;/h2&gt;
  &lt;p&gt;Next Image&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;Footer Content&lt;/div&gt;
  </code></pre>
  
  <p>Website with issue: <a href="http://manpoints.uk.to/image/30" rel="nofollow">http://manpoints.uk.to/image/30</a></p>