Negative margin and scrollbars

Question

I have something like this currently:

<div class = "className" style = "position: absolute; left: 50%; margin-left: -500px;" >

This works just fine when the browser's window is large enough (more than 1000px wide), but when I resize it to a smaller width, part of the div overflows to the left and the scrollbar doesn't cover the overflowed area. I tried it on Firefox, Chrome and IE8, all result in the same symptoms. How can I fix this? Here's a demo: http://pastehtml.com/view/bsanetaio.html (try resizing your browser window to a width smaller than 1000px to see the problem).

Answer 1

This should achieve the desired effect. Notice that the inner div does not have position absolute.

<div style="position: absolute; left:50%">
  <div style="width: 1000px; margin-left: -500px;">

  </div>
</div>

There may be a better way to do what you are trying to do though.