I am trying to divide the screen into several panels for a web application with some of the dimensions fixed and others flexible to use up all available browser window space. I would like to be able to have scrollbars within the panels when the content does not fit. In particular, I would like a fixed header with panels below it to use up the remainder of the page, but for each panel to have its own scroll bar and no scroll bar on the page as a whole.
I have some sample code at http://zambia-arisia-dev.dreamhosters.com/test2.html
I put all the CSS inline on the elements for ease of illustration of what I'm trying to do.
The URL above renders as I intend it in Chrome 14.0 (Mac) and Safari 5.0.6 (Mac). On Firefox 7.0.1 Mac, the content which does not fit under "Upper td title" overruns its intended container instead of creating a scrollbar.
IE9 on a PC is even weirder. In quirks mode, the "Upper td title" sections works as intended, but the left panel does not maintain my directed minimum width of 350px. In IE9 mode, the width is correct, but the content overflows, the right panel is shifted down, and the two panels on the left don't fit within the body height creating a scroll bar for the whole page.
Can anyone suggest a combination of HTML and CSS which will render correctly on these four browsers? I'm willing to continue to use tables (as I am currently doing) or drop them for divs, which I'd prefer but don't think is feasible.