title: How to anchor a dynamic div to the screen?
body: <p>I'm looking for a way to devide my screen perfectly into two divs.
  One small fixed sized on the left and one with dynamic width on the right.</p>
  
  <p>I didn't figured out how to do this yet. 
  Because the width in percentage is not proportional.</p>
  
  <p>For example:
  <a href="http://jsfiddle.net/acmnU/2/" rel="nofollow">http://jsfiddle.net/acmnU/2/</a></p>
  
  <p>If you resize the result field or the overall width you see that the green
  div will not resize in proportion with the screen.
  If the field gets to small the green div slips under the red one.</p>
  
  <p>what I need is some kind of anchor. So that the green div fill the entire screen without
  getting to big.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="content"&gt;
          &lt;div class="left"&gt;left&lt;/div&gt;
  
          &lt;div class="right"&gt;right&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
  height: 300px;
  }
  
  #content {
      height: 100%;
  }
  
  .left {
  
      float: left;
      margin-left: 10px;
      background-color: red;
      height: 100%;
      width: 200px;
  }
  .right {
      float: left;
      margin-left: 10px;
      background-color: green;
      height: 100%;
      width: 80%;
  }
  </code></pre>