title: Make div go all the way down the page
body: <p>I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)</p>
  
  <p><a href="http://jsfiddle.net/vmm1s4Lt/" rel="nofollow">http://jsfiddle.net/vmm1s4Lt/</a><br>
  <a href="http://codepen.io/bmxatvman14/pen/fihwD" rel="nofollow">http://codepen.io/bmxatvman14/pen/fihwD</a></p>
  
  <p>Excerpt:</p>
  
  <pre><code>nav {
      background: black;
      color: white;
      float:left;
      width:20%;
      height:800px;
      display:inline-block;
      /*margin-top: 40px;*/
      padding-bottom: 40px;
      position: relative;
      z-index: 10;    
  }
  
  #main {
      background-color:#04cfe1;
      float:right;
      width:80%;
      /*margin-right:10px;*/
  }
  </code></pre>
  
  <p>Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.</p>
  
  <p>I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.</p>
  
  <p>Full page site: <a href="http://rubergaming.com/project/" rel="nofollow">http://rubergaming.com/project/</a> </p>
  
  <p>Thanks a ton!</p>