Absolute Div Shifts When Scrollbar Is Present

i have a problem with the entire content of my page. The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts

Solution 1:

If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.

Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.

<divclass="wrapper">
  your content goes here
  <divclass="absoluteDiv"></div></div>

.wrapper { position: relative; }
.absoluteDiv { position: absolute; }

Solution 2:

I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.

AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.