"exotic" css layout - left fixed static, right fluid scrollable containing mixed elements - css

Question

I am having troubles to achieve quite an "exotic" layout which is some kind of a "nested" layout where the HEADER and Footer are actually part of the right column (or "frame"):
- Left column - Fixed,Static
- Right column - Fluid/liquid/scrollable
--- Header - fixed
--- left/main fluid/liquid
--- Right/sidebar - fixed
visually it should be something like that :
so basically the yellowish area is static, fixed and always in view.
The green frame is scrollable , and it contains the header, footer and sidebar.
I have searchd all major "css-layout-galleries" sites, but I did not encountered a solid solution yet . (most have the header at the top of the page)
My main problem is to achieve a bulletproof method that will work on ALL major OS & browsers (Firefox 3.6 - 6 , IE 6-9 , Opera , safari > Mac, Win, Linux)
Right now, (as usually expected) IE is always giving me a hard time, although in some layout experiments , also firefox is giving an unexpected different results (between Vr. 3.6 and 5 for example)
I hope someone can point me in the right direction.

Answer 1

This should get you close, with IE 6+ compatibility if you do something like this fiddle.
HTML:
<div class="outer">
<div class="side">
Side content. Fixed width. Floats left with a negative margin.
</div>
<div class="main">
Main content...fills the rest of the width (fluid)
</div>
</div>
CSS:
div.outer {
margin-left: 100px;
background: red;
}
div.outer div.side {
display: inline; /* for IE 6 */
float: left;
width: 90px;
margin-left: -100px;
background: yellow;
}
div.outer div.main {
min-height: 200px;
}

Answer 2

Have you tried something like this? (fiddle) I think that's pretty much what you need.
HTLM:
<div id="left-col">left col</div>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="sidebar">sidebar</div>
main
</div>
<div id="footer">footer</div>
</div>
CSS:
#left-col {
width: 50px;
position: fixed;
background: yellow;
left: 0;
top: 0;
}
#container {
margin-left: 50px;
background: black;
}
#header {
background: green;
}
#main {
background: blue;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 50px;
background: pink;
}
#footer {
background: red;
}
It's working in FF, Chrome and Opera in Mac. I can't test it in any Windows browser right now, so IE might be a problem here :P Anyway, in case this works, you'll still need to fix left-col's and sidebar's height to be 100% somehow. But before that, you can give this layout a try.