CSS

Frustrated and stuck here...

Here's the scenario: I want the sidebar of a page I'm working on not to scroll... Easy: Fixed...

But I also want the whole main container - 957 pixels wide to be centered...

So here's what I've done: Main Container div is centered on the page and contains two sub-divs - Sidebar Container and Viewer...

The sidebar then contains another sub-div: Sidebar whose position property is set to: Fixed...

Great, everything is peachy keen and fantastic... in IE 7... Works like a charm, does exactly what I want it too...

IE 6 - displays fine and fixed property is ignored... No-Problem...

Firefox... grrr... Wont center...

I know that technically: Fixed Postion means fixed relative to the browser window... In IE 7 it is allowing me to fix postion relative to parent div...

Can I get the centered effect i am after in Firefox? Is there a way I can use the fixed position property and make firefox see it as fixed relative to the parent div?

Thanks ya'll... This is really frustrating me...

make container position: relative; so the absolute one can position itself inside the centered container..

the position:fixed one then seems to take it's position from the absolute one instead of the viewport

pseudo working code:

#container { width: 957px; margin: 0 auto; /* center */ position: relative; } #viewer { margin-left: 200px; } #sidebar { width: 180px; position: absolute; top: 0; left: 0; } #sidebar div { position: fixed; } <div id="container"> <div id="viewer">..</div> <div id="sidebar"><div>the fixed sidebar</div></div> </div>