Website layout moving slightly between pages - how to stop it

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;
}

possible duplicate of [How to prevent scrollbar from repositioning web page?](http://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page) — Quentin, Jan 23 '12 at 16:45
I believe the layout change you're seeing is due to a scrollbar being shown on the about page. You should be able to get around this by always showing the scrollbar: try "overflow-y: scroll" — dinjas, Jan 23 '12 at 16:46
@Quentin yep, didn't realize that it was the scrollbar and had a "duh" moment:D — vasek1, Jan 23 '12 at 16:58

score 8 · Accepted Answer · edited May 23 '17 at 10:24

8

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

edited May 23 '17 at 10:24

Community

1
1

answered Jan 23 '12 at 16:42

Logan Serman

29,447
27
102
141

score 5 · Answer 2 · answered Jan 23 '12 at 16:43

5

Add this style:

body {
    ...
    overflow-y: scroll;
}

For centered pages, you want the scroll-bar to be always visible (even when it's not needed). That way the page won't shift horizontally depending on whether the scroll-bar is visible or not.

answered Jan 23 '12 at 16:43

Šime Vidas

182,163
62
281
385

score 1 · Answer 3 · answered Jan 23 '12 at 16:43

1

The scroll bar is adjusting the layout. When the scroll bar appears on the browser window, it minimizes the width by a certain amount of pixels (the width of the scroll bar itself).

answered Jan 23 '12 at 16:43

Website layout moving slightly between pages - how to stop it

3 Answers3