title: Absolute positioned div floats over main content
body: <p>I am absolutely positioning a footer at the bottom of the browser window, using the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              Content
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              Footer
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#content {
      margin-bottom: 20px;
      background: red;
  }
  
  #footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20px;
      background: blue;
  }
  </code></pre>
  
  <p>This works just as intended, however when I make the browser window smaller the footer will eventually cover the main content. What is the most efficient way of preventing this?</p>
  
  <p>Thanks in advance.</p>