I need my site design to do two things.
1) Have a background div containing several position:relative child divs that properly hides overflow in IE6+/FF/Safari. The parent div can be positioned absolute so that it scrolls with the page (so long as it is not clipped when you scroll, which happens using 100% height since it sets the height to 100% of the window height and not 100% of the scrollable height), or it can be positioned fixed so that it remains stationary while the user scrolls (must work in IE 6 and up).
2) Have a centered, fixed width div for content that can be taller than the window (must allow scrolling).
The closest I can get is here: Example
The two main problems that I can see are that IE ignores the overflow:hidden attribute and, less importantly, that using the mouse wheel to scroll in Firefox requires that the cursor be over the content div.
Thanks for your help/input!
1) Have a background div containing several position:relative child divs that properly hides overflow in IE6+/FF/Safari. The parent div can be positioned absolute so that it scrolls with the page (so long as it is not clipped when you scroll, which happens using 100% height since it sets the height to 100% of the window height and not 100% of the scrollable height), or it can be positioned fixed so that it remains stationary while the user scrolls (must work in IE 6 and up).
2) Have a centered, fixed width div for content that can be taller than the window (must allow scrolling).
The closest I can get is here: Example
The two main problems that I can see are that IE ignores the overflow:hidden attribute and, less importantly, that using the mouse wheel to scroll in Firefox requires that the cursor be over the content div.
Thanks for your help/input!