title: Keeping the footer at the bottom
body: <p><a href="http://jsfiddle.net/W4PKg/" rel="nofollow">http://jsfiddle.net/W4PKg/</a></p>
  
  <p>I have a page with similar structure:</p>
  
  <pre><code>&lt;div id="page"&gt;
      &lt;div id="content"&gt;
          &lt;h1&gt;News:&lt;/h1&gt;
          &lt;div class="body"&gt;
              &lt;div class="news"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;div id="footer"&gt;
           &lt;div class="wrapper"&gt;
                &lt;p&gt;stuffstuffstuff&lt;/p&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It seamed okay while there weren't many content in it, but when I added more text the footer started acting weirdly and eventually just flew to the middle of the page. I've tried a few solutions posted in the net but none of them seem to do the trick or I'm just doing something wrong. Anyway, hoping I can find some help here</p>