title: CSS Layout not extending wrapper
body: <p>I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully.  Is there something I am doing wrong?</p>
  
  <p>Thanks</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
         &lt;link rel="stylesheet" type="text/css" href="style/style.css"&gt;
   &lt;/head&gt;
   &lt;body&gt;
       &lt;div id="container"&gt;
           &lt;div id="header"&gt;
               &lt;div id="navbar"&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;div id="topper"&gt;This is the Topper&lt;/div&gt;
           &lt;div id="colone"&gt;This is column one&lt;/div&gt;
           &lt;div id="coltwo"&gt;This is column two&lt;/div&gt;
           &lt;div id="colthree"&gt;This is colum three&lt;/div&gt;
           &lt;div id="footer"&gt;This is the footer&lt;/div&gt;
       &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  
   @charset "utf-8";
  /* CSS Document */
  #container
  {
      background-color:#CCC;
      min-height:100%;
  }
  #header
  {
      background-color: #000;
      width:100%;
      float:left;
  }
  #navbar
  {
      background-color: #FFF;
      border-radius: 10px;
      height:75px;
      width:70%;
      margin: 0 auto;
      margin-top:10px;
      margin-bottom:10px;
      border-radius:10px;
  }
  #topper
  {
      background-color:#000;
      height: 175px;
  }
  #colone
  {
      background-color:#FFF;
      float:left;
      margin-left:15px;
      margin-top:-20px;
      height:150px;
  }
  #coltwo
  {
      background-color:#FFF;
      float:left;
      margin-left:15px;
      margin-top:-20px;
      height:150px;
  }
  #colthree
  {
      background-color:#FFF;
      float:left;
      margin-left: 15px;
      margin-top:-20px;
      height:150px;
  }
  
  #footer
  {
  }
  </code></pre>