title: CSS Parent DIV Overflow
body: <p>I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="Container"&gt;
          &lt;div id="Logo"&gt;&lt;/div&gt;
  
          &lt;div id="Banner"&gt;
              &lt;div id="Nav"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="Content"&gt;
          &lt;/div&gt;
  
          &lt;div id="footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;​
  </code></pre>
  
  <p>And my CSS is as follows:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  
  html, body {
      height:100%;
      padding:0;
      margin:0;
      background-image:url(../layout.img/background_gradient.gif);
      background-repeat:repeat-x;
  }
  
  #Container {
      height:100%;
      width:950px;
      margin:auto;
  
      background-color:#FFFFFF;
      border-left:1px solid #333333;
      border-right:1px solid #333333;
  }
  
  #Logo {
      width:160px;
      height:160px;
      float:right;
  }
  
  #Banner {
      width:100%;
      height:160px;
  }
  
  #Nav {
      width:550px;
      height:33px;
      position:relative;
      top:100px;
      left:50px;
  }
  
  #Content {
      clear:both;
  }
  </code></pre>
  
  <p>And finally the result can be seen here: </p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/mczMS/" rel="nofollow noreferrer">http://jsfiddle.net/mczMS/</a></p>
  </blockquote>
  
  <p>As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.</p>