Question

I have a html where the content is centered using the classic method:

width: 960px;
margin: 0 auto;

Now depending on the height of the content on a page a scroll bar might be shown.
which will make the content to be centered in an area a bit smaller.

So in effect the content will just jump left or right.

The solution that i have is overflow-y: scroll; on body, which will always show the scroll bar.

But if you mostly have small pages, you get an unused scrollbar all the time.

Are there any better solutions to this?

Thanks.

Answer 1

you could either remove the scrollbars:

body, html {
    overflow: hidden;
}

Or (and still hiding the scrollbars), go for a javascript solution to add scrollbars inside the block you want, that way it won’t shift the content.