title: webpage collapses when minimizing html & css
body: <p>My body div collapses under the left bar navigation when i begin to minimize the window.</p>
  
  <p>Can somebody please advise on what i have done wrong or what more i need to do.</p>
  
  <p>Much appreciated, thank you.</p>
  
  <p>css snippet:</p>
  
  <pre><code>#navigation {
  
  
     float: left;
     min-width: 20%;
     margin: 0;
     margin-top: 5px;
     font-weight: normal;
  
  }
  
  #centerDoc {
  
     float: left;
     width: 80%;
     padding: 0 0 20px 0; /*top right bottom left*/
     margin-top: 0px;
  
  }
  
  
  #header{
  
     position: relative;  
     width:100%;
     height:96px;
     margin-left: 5px;
  
  
  }
  
  
  
  #footer {
          font-family: Trebuchet MS;
          font-size: x-small;
          padding:2px;
          margin:0px;
          background-color:#CBE3F6;
          color:#fff;
          border-bottom: 1px solid #9EC4E2;
          border-top: 1px solid #9EC4E2;
          text-align:center;
  
          width: 100%;
          }
  
  
   #wrapper{
  
  
     position: relative;
     margin-left: 5px;
  
  
  }
  
  
  
  #container {
     width: 100%;
     height:100%;
  }
  </code></pre>
  
  <p>Template of a page:</p>
  
  
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;?php require_once 'includes/header.php';?&gt;
  
  
  &lt;div id="wrapper"&gt;
  
      &lt;?php require_once 'includes/nav.php'; ?&gt;
  
  
      &lt;div id="centerDoc"&gt;
  
  
  
  
  
  
  
  &lt;/div&gt;  &lt;!--centerDoc !--&gt;
   &lt;/div&gt; &lt;!-- wrapper !--&gt;
  
  
  
     &lt;/div&gt; &lt;!--container !--&gt;
  
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>