How to compensate for Vertical Scrollbar when it is not yet present

Question

Maybe this is an easy fix, but it has been driving me crazy for a long time so I finally decided to see if a solution exists.

Simply put, I center most of my web pages within wide view-ports.

Example, a view-port might be capable of 1028px and I want my page width to only be 960px.

So my css looks like this:

#pageWrapper { /* page width is 960 pixels */
    margin:0 auto;
    width:960px;
}

No problem with that.

The problem comes in when I start a dynamic page that is shorter than the height of the and then my page expands (via jQuery slideOut, etc.) below the bottom of the screen and causes the vertical scrollbar to appear.

It ends up making the page flicker left during the slideOut and then flicker right during slideIn.

Is there some way through css to force a 20px right margin and still take advantage of margin:0 auto; ?

Thanks.

Answer 1

When the contents of the page no longer fit vertically, the browser adds a scrollbar to the right side of the window. This changes the available width in the browser window, so any content that is either centered or positioned relative to the right side of the window will move left a bit. This is very common.

There are a number of ways to control this, but the most common is to either make it so you always have a scrollbar or never have a scrollbar by controlling the overflow-y property on the window.

Setting overflow-y: scroll will force the scrollbars to always be there.

Setting overflow-y: hidden will force there to never be scrollbars.

Answer 2

NB: overflow-y: hidden prevents the user from scrolling down by any means, effectively rendering any content below the lower viewport inaccessible.