title: Div With Background Color Not Covering Child Div
body: <p>I have two divs:</p>
  
  <ul>
  <li><code>content2</code> which has my background color and has a <code>height:auto</code> and <code>width:100%</code></li>
  <li>and another div inside <code>content2</code> called <code>extensive_look</code> </li>
  </ul>
  
  <p>The latter is the container for my content and thus has a fixed width, is centered (with <code>margin:0 auto</code>), but has no background color. The idea is that content structures the content down to a certain width, and <code>content2</code> gives a background color that spans the width of the whole page. </p>
  
  <p>The problem is that it seems <code>content2</code> does not cover all of the content with it's background color. </p>
  
  <p>I first thought it might be because <code>extensive_look</code> has <code>position:relative; top:20px;</code> but even removing that didn't fix the problem. </p>
  
  <p>The issue I'm talking about can be seen <a href="http://tsawebmaster1.hhstsa.com/web_design.html" rel="nofollow noreferrer">here</a> if you scroll down to the bottom of the good examples section where you will see the background color ends early. How can I fix this issue? My code is below.</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="content2"&gt;
    &lt;div id="extensive_look" style="width: 1000px; margin: 0 auto; 
      position: relative; top: 20px; height: auto;"&gt;
      &lt;h1 align="center"&gt;Good Website Examples&lt;/h1&gt; 
        &lt;p&gt;Check out these websites for some inspiration...&lt;/p&gt;
        &lt;div id="white_house" class="ext_image"&gt;
          &lt;a href="http://www.example.com" target="_blank"&gt;
            &lt;div class="view_site"&gt;&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div id="abc" class="ext_image"&gt;
          &lt;a href="http://www.example.com" target="_blank"&gt;
            &lt;div class="view_site"&gt;&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div id="quartz" class="ext_image"&gt;
          &lt;a href="http://www.example.com" target="_blank"&gt;
            &lt;div class="view_site"&gt;&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div id="usatoday" class="ext_image"&gt;
          &lt;a href="http://www.example.com" target="_blank"&gt;
            &lt;div class="view_site"&gt;&lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.content2 {
    padding: 20px;
    background-color: #e0e0e0;
    min-height: 500px;
    height: auto;
    width: 100%;
  }
  </code></pre>