So I'm working on a website where all the pages have the same layout, just a simple header, some links, then a box for the main content.

When the text in the main content box extends down enough so that the user will need to scroll up and down the page the entire web page (content, header, and links) shifts about 5 pixels to the left. This is only a problem when the user navigates to another page where there is no scroll bar because it looks like everything on the page shifts 5 pixels over.

Right now I have these htlm/css codes applied



I'm wondering if maybe my left/right margin setting of auto is causing the problem. Like when the scroll bar appears the browser needs to adjust the location of everything on the page so it slightly moves everything over. Is there a way I can make it so the browser does not take the scroll bar into account when adjusting for auto margins?

Problem sort of fixed. I was able to find other people with the same problem and I guess there is no way around it. Apparently IE doesn't have this problem because it shows a scrollbar even when the user doesn't need to scroll. The only way around it is to force every page to show a scroll bar even when there's no need to scroll. This can be accomplished with :

I'm guessing you really don't want every page to show a scroll bar. In that case, apply the following CSS and if necessary, absolutely position one element inside another that has relative position explicitly set.

I would create an appropriately nested container element of and set a margin-right of ~15px. This should give your pages a consistent look whether there is a scrollbar or not.