title: Floated DIVs overlapping incorrectly
body: <p>In the following code, I'd like the <code>#nav</code> div to overlap the <code>#content</code> div. Even though <code>#nav</code> has a higher z-Index value, it is still being overlapped by <code>#content</code>. </p>
  
  <p>FIDDLE: <a href="http://jsfiddle.net/Zfcba/" rel="nofollow">http://jsfiddle.net/Zfcba/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="page"&gt;
      &lt;div id="nav"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#page
  {
      margin: 20px 0px;
      padding: 10px;
      display: block;
      width: 70%;
      height: 200px;
      border: 1px solid gray;
  }
  
  #nav
  {
      float: left;
      width: 40px;
      height: inherit;
      border: 1px solid red;
      z-index: 999;
  }
  
  #content
  {
      float: left;
      margin-left: -20px;
      width: 200px;
      height: inherit;
      border: 1px solid blue;
      background: lightgray;
      z-index: 0;
  }
  </code></pre>
  
  <p>Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.</p>
  
  <p>Note: I tried the same without the outer div (<a href="http://jsfiddle.net/Zfcba/1" rel="nofollow">http://jsfiddle.net/Zfcba/1</a>). Still the same problem. :(</p>