Scrollable div in table cell

Question

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...

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?

http://jsfiddle.net/zS8vy/3/

Here's some of my CSS:

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;
}

EDIT: OK I found the problem, I hadn't set height: 100% on the tr and tbody 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...

Answer 1

i created a fiddle please check this its a little different but its working in all browser

http://jsfiddle.net/zS8vy/7/

 body, td, div, p, a {
    font-family: Verdana, Arial;
}

html, body {
    height: 100%;
    overflow: hidden;
}

table {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table tr td.header {
    background-color: #222;
    color: #BBB;
    padding: 5px;
    text-align: center;
}

table tr td.content {
    text-align: center;
    vertical-align: middle;
    background-color: #333;
    color: #AAA;
    position:relative;
}

table tr td.rightScroll {
    width: 200px;
    height: 100%;

    border-left: 1px solid black;
    background-color: #999;
   display:table-cell;


}

table tr td.rightScroll div {
 width:200px;
    height:calc(100% - 28px);
position:absolute;
    top:28px;

    right:0;
    overflow-y: scroll;
}