The righthand div has been dropped from this example - two scrollbars cheek by jowl would be wack.

IE6 must be in standards mode for this to work, so no xml prolog. Elements are, surprise surprise, fixed for modern browsers rather than absolutely positioned. The expressions for IE are listed below:

/* old ghost in the box for IEs 5.01 + 5.5 */
body
    {
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    }
#content
    {
    height: expression( document.body.clientHeight - (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * (8 + 5) ) + 'px') ;
    overflow: auto;
    }
/* backslashes feed the new ghost in the box to IE6 */
h\tml
    {
    overflow: hidden;
    }
h\tml body
    {
    height: 100%;
    overflow: auto;
    }
h\tml #content
    {
    height: 100%;
    overflow: visible;
    }
#header, #footer
    {
    width: expression(document.body.clientWidth + 'px');
    }
#sidebar-left
    {
    height: expression(document.body.clientHeight - (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * (8 + 5)) + 'px');
    }

Why would you want to use fixed rather than absolute for the positioning? Because the absolute method ruins the basic page up/page down scrolling routines - the user must first click within the "frame" to give the element focus which they quite probably don't realise that they can do. And why should they? By using fixed, the main content can return to being just a part of the normal body flow and can be scrolled accordingly. (There is a downside to this though - if you have a header or footer, and presumably you do, the page actually scrolls too much since the body element is the height of the viewport, not the viewport minus the header and footer)

Except for IE 5.01 and 5.5 since it's #content that gets overflowed rather than the body element. This is the difference between the old and new skool ghost in the box hack. Of course, once focus is given to #content (just the act of touching the scollbar should be enough) it all works as expected. If you really can't live without "out of the doc load" scrolling for IEs 5.01 and 5.5, you have two options. 1. Include some javascript that gives #content focus when the document has loaded. 2. Use actual frames.

Mac IE5 does understand fixed and could be made to work with it if Mac IE5 must have exactly the same framed appearance - though it should be noted that thanks to a pretty horrendous bug, all mouseover-related effects (including the changing of the cursor to let the user know they're over a link) are completely thwarted within elements that are fixed.

Safari has a nasty bug where scrolling the body's scollbar causes any scollbars on fixed elements to scroll too (but not their contents) - of course, if the fixed elements don't have sufficient content to make them scroll, this issue doesn't arise. If it is an issue, then the absolutely positioned way is the solution.

Mac IE5 and Operas 5 + 6 don't scroll any fixed elements which have had their height set via the top-bottom property since they ignore the bottom value and consequently the overflow doesn't kick in. Again this issue is only a problem if there is sufficient content to require scrolling - and if it is, it's a simple matter to make these browsers display as a continuous scrolling page.

Fixed Compatibility

Works in IE6, IE5.5, IE5.01, Firefox 0.8, Mozilla 1.6, Safari 1.1, Opera 7.5, Opera 7.23

Works after a fashion in Operas 5 + 6 and Mac IE5

Content is king

Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.

Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.

Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.

Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.

Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king. Content is king.

END CONTENT