Fixed layer with CSS "overflow: auto"

This is a simulation of CSS "position: fixed" for MSIE. The main text on this page is contained in a 100% high, scrollable <div>. The scrollbar belongs to the <div>, not to the <body>. The ordinary <body> content is found in the fixed green box. All HTML and CSS on this page should follow the W3C spec except overflow-y: hidden, which is used for cosmetical purposes in earlier IE versions.

Browser support

The browsers listed below are those I have tested in so far. I don't know how other browsers will behave. Because of the problems in Opera 7.10 I recommend using Conditional Comments (section 3, example A), which hides CSS from all browsers except MSIE 5+. Other browsers like Mozilla and Opera may use CSS position: fixed instead (that's how I've done it on this page).

Note that if you hide parts of the CSS from non-MSIE browsers (like on this page) the details about non-MSIE browsers below do not apply.

Supporting browsers

MSIE 4.72/win
MSIE 5.0/win
MSIE 6.0
Netscape 6.1+
Mozilla
Opera 7.0
Opera 7.11 (not 7.10)

Non-supporting browsers

Netscape 4.x (degrades gracefully)
MSIE 4/mac (compare with this page)
MSIE 5/mac (not sure about the details)
Opera 6.0 (degrades gracefully; compare with this page)
Opera 7.10 (freezes)

General problems

In IE5 and IE6/quirk mode double scrollbars will appear unless one adds the non-standard CSS overflow-y: hidden property.
Content must be contained in either the scrollable or the fixed <div>, not outside any of them.
If you apply margin or padding to div#fixedcontent, Mozilla adds this to the 100% height and width which results in double scrollbars. Because of that I have nested a div#innerbox and apply the padding to that instead. This does not seem necessary for MSIE 6.
The scrolling content must be absolutely positioned for Opera 7.
The fixed content can obscure other content, and can itself easily become obscured in small browser windows.