Negative margin and scrollbars
I currently have something like this:
<div class = "className" style = "position: absolute; left: 50%; margin-left: -500px;" >
This works fine when the browser window is large enough (over 1000px wide), but when I resize it to a smaller width, part of the div overflows to the left and the scrollbar does not cover the overflowed area. I've tried this on Firefox, Chrome and IE8, they all lead to the same symptoms. How can I fix this? Here's a demo: http://pastehtml.com/view/bsanetaio.html (try resizing your browser window to less than 1000px width to see the problem).
source to share