title: converting frameset into css
body: <p>I'm trying to build a CSS page layout based on this old frameset:</p>
  
  <pre><code>&lt;frameset cols="30%,70%"&gt;
      &lt;frame&gt;left&lt;/frame&gt;
      &lt;frameset rows="80%,20%"&gt;
          &lt;frame&gt;top&lt;/frame&gt;
          &lt;frame&gt;bottom&lt;/frame&gt;
      &lt;/frameset&gt;
  &lt;/frameset&gt;
  </code></pre>
  
  <p>What was easy 15 years ago seems to get a bit more complicated nowadays. I wrote the following HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="left"&gt;left&lt;/div&gt;
      &lt;div id="right"&gt;
          &lt;div id="top"&gt;top&lt;/div&gt;
          &lt;div id="bottom"&gt;bottom&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Together with this CSS:</p>
  
  <pre><code>#container {
      border: 1px solid black;
      height: 300px;
  }
  
  #left {
      border: 1px solid red;
      float: left;
      width: 30%;
      height: 100%;
      overflow-y: scroll;
  }
  
  #right {
      border: 1px solid blue;
      margin-left: 30%;
      height: 100%;
  }
  
  #top {
      border: 1px solid red;
      height: 80%;
      overflow-y: scroll;
  }
  
  #bottom {
      border: 1px solid red;
      height: 20%;
  }
  </code></pre>
  
  <p>I put a demo <a href="http://jsfiddle.net/wsxrL/" rel="nofollow">here</a>.</p>
  
  <p>What I want to achieve and failed so far is the following: Height of <code>#bottom</code> shall be a certain pixel height, not percents. When I do this, I mess up with <code>#top</code>. I tried to use absolute positions to stick <code>#bottom</code> at the bottom but then I don't know how to let <code>#top</code> use the rest of the height.</p>
  
  <p>Any ideas would be appreciated. Thank you.</p>