Centered div changes position when scroll shows up

Question

I have a div container which is centered (by margin-left:auto and margin-right:auto) and page design looks fine when loaded... Below this div there is another hidden one, which shows up on user request. But when this happens browser scroll shows up and mess up my design because centered div also moves few pixels to the left (so it can again be in the center).

Can this behavior be stopped?

Alternative solution is adding overflow-y:scroll but I found that overflow-y is not supported by all browsers and I can't find by which browsers... Can somebody post a link where I can see browser support list for css3 functions?

Answer 1

With scroll always being shown, maybe be not good for layout.

Try to limit body width with css3

body {
    width: calc(100vw - 34px);
}

vw is width of viewport (see this link for some explanation)
calc calculate in css3
34px stands for double scrollbar width (see this for fixed or this to calculate if you don't trust fixed sizes)

Answer 2

This css will always show vertical scroll on your page.

body {
    overflow-y: scroll;
}

By default it's overflow: auto;