title: Positioning causes body to overlap with footer
body: <p>I'm sure it is to do with the positioning but I cannot resolve the issue. Body and footer comes on top of each other at the end of the page. How can I make body liquid so it doesn't overlap with footer?</p>
  
  <p>Thanks</p>
  
  <p><a href="http://jsfiddle.net/LzcP9/1/" rel="nofollow">JSFIDDLE</a> is here.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*
  {
      margin: 0px;
      padding: 0px;
  }
  div
  {
      display: block;
  }
  
  /* --- BODY ------------------------------------------------ */
  #body_block
  {
      float: left;
      width: 100%;
      background: #EEEEEE;
      /*background-image: url('../images/bg3.jpg');*/
  }
  #body
  {
      margin: 0 auto;
      position: relative;
      width: 900px;
      /*background: #BB0099;*/
  }
  #body_title
  {
      position: absolute;
      top: 15px;
      left: 0px;
      width: 200px;
      /*height: 24px;*/
      background: #aa99ff;
  }
  #body_search
  {
      position: absolute;
      top: 15px;
      right: 0px;
      width: 200px;
      /*height: 24px;*/
      background: #aa99ff;
  }
  #body_content
  {
      position: relative;
      top: 50px;
      left: 0px;
      width: 900px;
      /*height: 24px;*/
      background: #aa99ff;
  }
  
  /* --- FOOTER ---------------------------------------------- */
  #footer_block
  {
      float: left;
      width: 100%;
      /*background: #DDDDDD;*/
  }
  #footer
  {
      margin: 0 auto;
      position: relative;
      width: 900px;
      padding: 15px 0px 15px 0px;
      /*background: #CC0011;*/
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="body_block"&gt;
          &lt;div id="body"&gt;
              &lt;div id="body_title"&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt;
              &lt;div id="body_search"&gt;&lt;h1&gt;Search&lt;/h1&gt;&lt;/div&gt;
              &lt;div id="body_content"&gt;
                  TOP&lt;br /&gt;&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;&lt;br /&gt;BOTTOM
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="footer_block"&gt;
          &lt;div id="footer"&gt;FOOTER&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>