Table overflow working in Chrome and IE but not Firefox

Question

I am trying to get a layout that always takes up the entire screen, no more, no less. The layout has a header row, a 200px wide left bar (scrollable), and a scrollable content area.

This works in Chrome and IE, but in Firefox the scroll bars never show nor work. Any thoughts?

I would have preferred to use CSS, but could not find any way to do it.

The hi should no show, it is simply there to verify it does not.

AndrewR · Accepted Answer

This is a perfect use case for absolute positioning.

Always keep your HTML as simple as possible.

CSS to set absolute positioning and overflow: auto on your columns.

* {
    margin: 0;
    padding: 0;
}

html, body {
    background-color: yellow;
    overflow: hidden;
}
#header{
    position: absolute;
    top: 0px;
    left:0px;
    right: 0px;
    height: 72px;
    background-color: blue;
}
#leftcol {
    position: absolute;
    left: 0px;
    top: 72px;
    bottom: 0px;
    width: 200px;
    overflow: auto;
    background-color: green;
}
#rightcol {
    position: absolute;
    top: 72px;
    left: 200px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    background-color: purple;
}

I set up a JSFiddle to view it in the browser: http://jsfiddle.net/hpsXg/

Table overflow working in Chrome and IE but not Firefox

Answers (1)

Related Questions