Forum Moderators: not2easy

Message Too Old, No Replies

Help! CSS Fixed postion Property and Centering

Can a design be centered and include a Fixed element?

         

windwalker

8:10 pm on Mar 14, 2008 (gmt 0)

10+ Year Member



Hey folks...

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...

MarkFilipak

1:17 am on Mar 15, 2008 (gmt 0)

10+ Year Member



I offered some code here: [webmasterworld.com...]
Take a look at it in a browser (FF too) and let me know if it helps.

SuzyUK

4:07 pm on Mar 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



nest the fixed div inside an absolutely positioned one?

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>