title: Html, Body 100% Height and dynamic width for content
body: <p>I know that there are Questions here that covers parts of my Question but I can´t put them together to make my layout work.</p>
  
  <p>So basically I want a two Column Layout with a fixed Sidebar and dynamic Content fill up the remaining space.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;Nav 1&lt;/li&gt;
              &lt;li&gt;Nav 2&lt;/li&gt;
              &lt;li&gt;Nav 3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
      height:100%;
      margin: 0;
      padding: 0;
      border: 0;
  }
  
  #content {
      height:100%;
      float:left;
      /*margin: 0 0 0 200px;*/
  }
  
  #navbar{
      height:100%;
      width:200px;
      float:left;
  }
  </code></pre>
  
  <p>With this CSS I have the Problem that my content isn´t taking up the remaining Space, and if I remove the float I get a vertical scrollbar because there´s a margin on top!</p>
  
  <p>Any suggestions how I can achieve 100% Height without scrollbar (no overflow hidden because that doesn´t remove the margin on top) and dynamic content width?</p>
  
  <p>thanks in advance</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Ironically it works with <a href="http://jsfiddle.net/YRNsN/" rel="nofollow">jsfiddle</a></p>