Question

I am using a fixed width layout for a website (1000px), with the layout being centered in the screen by auto margins. However, I find that on some pages on the website, the layout is positioned slightly different than other pages for some reason. This is surprising to me, because I use Django and serve the same base template and stylesheet to each page, so I would expect them to look the same.

For example, take a look at http://crh.vkuzo.com/. If you load the “home” and “suggest” pages, the layout stays exactly the same. However, if you load the “about” page, you can see the layout move slightly to the left.

What is causing this slight movement, and how can I get rid of it?

P.S. here is the relevant CSS for the container div (at least what I think is relevant):

#wholepage {
    width:1000px;
    clear:left;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}

Answer 1

It is the browser’s scroll bar. See: How to prevent scrollbar from repositioning web page?