title: Scrollable div in table cell
body: <p>I'm trying to create a table layout with a header along the top, some content in the left and a scrollable section on the right. What I've done works in Safari and Chrome, but for some reason it doesn't work in Firefox, the scrollable div in the cell on the right doesn't scroll but instead pushes the table bigger... </p>
  
  <p>I've heard that these days you shouldn't use tables but instead use all divs, but how would you make a 2-column layout with a header area like this without a table?</p>
  
  <p><a href="http://jsfiddle.net/zS8vy/3/" rel="nofollow">http://jsfiddle.net/zS8vy/3/</a></p>
  
  <p>Here's some of my CSS:</p>
  
  <pre><code>html, body {
      height: 100%;
  }
  
  table {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
  }
  
  table tr td.rightScroll {
      width: 200px;
      height: 100%;
  }
  
  table tr td.rightScroll div {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> OK I found the problem, I hadn't set <code>height: 100%</code> on the <code>tr</code> and <code>tbody</code> elements. Now it all scrolls properly, but the content is off by the size of the header, for example if you scroll the right content to the bottom you can see it's getting cut off...</p>