1

I have a div with a fixed position, but I want it to stay in the same position when my browser screen is increased or decreased in width. Since I have margin:auto acting on the surrounding html objects, it changes its position relative to the surrounding objects. I do not want this to happen. How can I fix this?

This is my css so far:

position:fixed;
top:45px;
left:930px;
Justin Meltzer
  • 13,318
  • 32
  • 117
  • 182
  • what top/left/bottom/right have you set on the fixed element ? – Gabriele Petrioli Nov 04 '11 at 22:58
  • I added my css for the div.... – Justin Meltzer Nov 04 '11 at 23:00
  • you will need to set its `left` with a percentage value so that it follows the rest of the elements – Gabriele Petrioli Nov 04 '11 at 23:04
  • That sort of works, but when the margin for the full website is finished the div keeps moving but the rest of the elements do not. – Justin Meltzer Nov 04 '11 at 23:11
  • 1
    can you re-create this simply in a [fiddle](http://jsfiddle.net) and post it here so we can see it in action ? – Gabriele Petrioli Nov 04 '11 at 23:16
  • here's a crude example: http://jsfiddle.net/v84Vz/1/ try expanding your browser window all the way in width and notice that the yellow div with a fixed position eventually overlaps with the green div with a `margin:auto`. That shouldn't happen. The yellow div should behave like it has a margin:auto horizontally but have a fixed position for it's vertical position. – Justin Meltzer Nov 04 '11 at 23:34

1 Answers1

1

Based on your third comment, I believe you might find my solution to a previous problem similar to this to be your solution: Position element fixed vertically, absolute horizontally.

Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146