Fixed Postioning Question

[GiffordS]

I'm having a bit of a fixed positioning issue. I am trying to fix a division but it's going all wonky. Here is a basic code template..

html, header etc.

<div id="top">
this division is 750x200
</div>
<div id="container">
This is a container division for two separate divisions, left and right.  It has a width of 750 with height set to auto.
<div id="right">
This is the division I am trying to fix. It has a width of 300.</div>
<div id="left">
This floats left and lines up properly.  The width is only 300 px.
</div></div>
ending html stuff

And here is the relevant css...

#right
{
position: fixed;
top: 200px;
right: 20px;
width: 300px;
}

Ok, so what happens is that when I fix the "right" division it lines up completely off the page to the right. As in it begins to the right of the "top" division. I have tried changing the "right:" attribute to no avail. If I remove it entirely the division sits atop the "left" division. I even tried "left: 350px;" which was completely ignored. I'm a bit at a loss here.

 

[Vragabond]

I would expect your #right to be 300px wide, 200px from the top and 20px from the right of the viewport (the browser window). I would expect that to work in modern browsers and fail in IE6, because it does not support value "fixed" for the position attribute. Since position: fixed makes your division scroll with the page (it is always in the same place, regardless of where you scroll to), it is always relative only to the viewport and none of the other elements.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]