Content jumps horizontally whenever browser adds a scrollbar

Question

I\'m using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page\'s height and the browser adds a scrollbar,

Answer 1

I've run into this problem myself and I've found two ways to solve it:

1. Always force the scrollbar to be present: body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.

2. Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.

I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).

Facebook uses option 2.