Clever Geek Handbook

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).

+3


source to share


2 answers


This should provide the desired effect. Note that the inner div has no absolute position.

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

  </div>
</div>


Perhaps there is a better way to do what you are trying to do.

+1


source


Better you can use margin:0 auto

for content center. Better than Absolute



0


source






More articles:


All Articles