Fulfilling strange requirements with CSS (kind of simulating frames)
- by Bernhard V
Hi!
I'm struggling to find a way to code a site according to our strange requirements. The site should be displayed correctly in all browsers from IE6 to Opera.
The website is structured in three parts. It contains a header at the top, a navigation on the left an the rest of the screen should be filled with the content section. The following picture should help you better understand my description.
Here comes the kicker: Each of the three sections should be scrollable separately and no browser scrollbar should appear. The page should be displayed similar as if it would use frames. Of course, on a big enough screen, no scroll bars should appear.
It doesn't matter which way is used to display the site, although frames aren't an option an divs would be preferred.
There are two conditions:
The site should always fill the whole browser screen. The header and the content section should reach to the right border of the page, and the navigation as well as the content to the bottom.
As soon as the site is scaled down -- whether due to resizing the browser window or due to a smaller resolution -- a scrollbar for every single section should appear, but no "browser scrollbar" for the whole page. The header should always retain it's height and the navigation always it's width.
Do you know a way how all this can be achieved?
Yours
Bernhard
