title: CSS DIV height background image overlapping
body: <p>I have these two DIV tags with background image.</p>
  
  <pre><code>&lt;div class="content_bg"&gt;
      &lt;div id="content"&gt;
          &lt;div id="contentLeft"&gt;   
          &lt;/div&gt;
          &lt;div id="contentRight"&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer_bg"&gt;
      &lt;div id="footer"&gt;
          &lt;div id="footerLeft"&gt;            
          &lt;/div&gt;
          &lt;div id="footerRight"&gt;           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I manually set the height of the <strong>content</strong>, everything looks fine but if I set it to either 100% or Auto, the <strong>footer_bg</strong> overlap on top of the <strong>content_bg</strong>. Could someone kindly advice?</p>
  
  <pre><code>/*
  ====================================================================
  Content Area
  ====================================================================
  */
  
  .content_bg
  {
      background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
  
  }
  
  #content
  {
      width:980px;
      margin:auto;
      height:auto;   
      background:white;     
  
  }
  
  #contentLeft
  {
      float:left;
      width:209px; 
      margin-top:50px;   
  }
  
  
  #contentRight
  {
      float:right;
      width:770px;     
      font-family: Verdana, Arial, Sans-Serif;
      font-size: 11px;
      line-height:17px;
      border-left:1px solid;
      margin:20px 0 0 0;
  }
  
  /*
  ====================================================================
  Footer
  ====================================================================
  */
  
  .footer_bg
  {
      background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
  
  }
  
  #footer 
  {
      width:980px;
      height:258px;
      margin:auto;
      background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
  }
  #footerLeft
  {
      width:400px;
      height:50px;   
      font-family:Verdana, Arial, sans-serif;
      font-size:11px;    
      line-height:25px;
      float:left;
      padding: 20px 0 0 25px;
      color:#fff;
  }
  
  
  #footerRight
  {
      width:100px;
      height:50px;       
      float:right;
      padding: 20px 0 0 0;
  }
  </code></pre>