CSS Positioning with Margins

[freshdude]

I have my whole site set up to be centered with all elements (position:absolute within this one div:

#website {
position:relative;
margin:0 auto;
width:960px;

How do I add a <div> with a fixed position (stays in the same left and top position as you scroll down) that will be relative to the centered site?

I tried position:fixed; but it just ignores the margins and a left:60px; is always 60px from the left, no matter how wide the browser window.

[Custard7A]

It sounds like you should be using position: absolute, which respects the containing block you put it in, but removes that box from the flow. I'm assuming here that you're wanting to place this box outside the main div (You would place it inside the main div in the code, but position it outside with styling). Using position: fixed is generally only relative to the viewport. I don't understand why you would be using position: absolute on all elements inside your centering div.

[freshdude]

I used "position: absolute" for the elements in the centering <div> so that they would disappear as I scrolled down on the site.

I want a new <div> to be within the centering <div>, but I want it fixed at 60px from the top and 60px from the left of the 960px centering <div> the whole time I scroll down.

I found margin-left:60px works with position:fixed; but I wondered if there was a better way.

[Custard7A]

If your elements in the centering div aren't scrolling away as one would expect from scrolling — when you are using the default positioning that is — then you must be doing something quite unusual to me.

If you have it working as you want with fixed positioning, then I would say it seems fine to do so. There may be a better way, but using position: absolute on all your centered elements doesn't seem like the best way to do that either.