title: Making a CSS footer either sit at the bottom of the browser window or bottom of content
body: <p><strong>Duplicate of <a href="https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page">this question</a>.</strong></p>
  
  <p>I've got an existing site (<a href="http://www.jacquelinewhite.co.uk" rel="nofollow noreferrer">jacquelinewhite.co.uk</a>), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.</p>
  
  <p>Effectively the HTML is structured like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="top_bar"&gt;
    &lt;/div&gt;
  &lt;div id="header"&gt;
  &lt;/div&gt;
  &lt;div id="left_menu"&gt;
  &lt;/div&gt;
  &lt;div id="right_content"&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;
  &lt;/div&gt;
  &lt;!-- FOOTER AREA --&gt;
  &lt;div id="footer"&gt;
  &lt;/div&gt;
  &lt;!-- END FOOTER AREA --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.</p>
  
  <p>How should I fix this?</p>