Question

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.

layout of the website http://www.4freeimagehost.com/uploads/820aee2ded8b.png

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

edit 1: Oh, and I forgot: The site should be passable viewable in 1024×768.
edit 2: Another thing: The header has got a fixed height and the navigation a fixed width. The height of the navigation as well as the height and width of the content should fill the entire screen.

Answer 1

UPDATED:

i have found this article

• http://www.alistapart.com/articles/conflictingabsolutepositions/

just CSS & HTML i think is what you are looking for!

FINAL DEMO: http://jsbin.com/icemo3/24

In responce to your last comment, i have worked out this solution that require also a bit of jquery (javascript) please see the demo and use the demo code!

$(window).load(function() {
getWindowProportion()
});

$(window).resize(function() {
getWindowProportion()
});

function getWindowProportion() {
 $('#wrapper').attr('style', 'width:' + $(window).width() + 'px');
    $('#header').attr('style', 'height:200px;width:' + $(window).width() + 'px');
    $('#navigation').attr('style', 'height:' + ($(window).height() - 200) + 'px;top:200px;width:300px');
    $('#content').attr('style', 'width:' + ($(window).width() - 300) + 'px;top:200px;height:' + ($(window).height() - 200) + 'px;left:' + ($('#navigation').width()) + 'px');
};

---

CSS DEMO 2: http://jsbin.com/icemo3/2

CSS DEMO 3: http://jsbin.com/icemo3/3

* { margin:0; padding:0 }
html, body { margin:0; padding:0;  position:relative; overflow:auto; width:100%;  height:100%; }
#content { float:left; width:  80%; background: cyan; height:80%;  top:20%; left:20% }
#navigation { float:left; width:  20%; background: green; height:80%;  top:20% }
#header {  width:  100%; background: red; height:20%; }
.scrollme { margin:0; padding:0; overflow: auto;  position:absolute; }
p { margin:10px }

<div id="header" class="scrollme"><p>some text here</p></div>
<div id="navigation" class="scrollme"><p>some text here</p></div>
<div id="content" class="scrollme"><p>some text here</p></div>

NOTE:

tested on: 
IE6+
Chrome
Firefox
Opera

1. each section have its own scroll-bar!
2. each section have 100% width and height!
3. no browser window scroll-bar appear!
4. each section always retain its proportion
5. work on all screen resolution