title: CSS can a div automatically be sized to fit the rest of the browser
body: <p>I have a page I'm creating where I want to have to columns the first colomn has a fixed a sized and the second column has to fill the rest of the window width. This is what I came up so far but it doesn't seen to work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div class="nav"&gt;&lt;/div&gt;
          &lt;div class="page"&gt;my page content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container{
      width: 100%;
      padding: 0 0;
  }
  #container &gt; div{
      color: white;
  }
  .nav{
      width:200px;
      height:500px;
      float:left;
      background-color:#666;
  }
  .page{
      height:500px;
      float:left;
      background-color:#FFF;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/scNSL/" rel="nofollow">JS FIDDLE</a></p>