Forum Moderators: not2easy
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>