13 May 2010 ~ Comments Off

Jumping page content

You are likely aware of the page-centering technique of adding auto left and right margins to an outer div:

1
2
3
#some_div   {
     margin: 0 auto;
}

One of the issues of this is that when used on websites with multiple pages, the layout can appear to “jump” a little bit when going back and forth between pages that require scroll bars and pages that do not. This is because the ~16px width of the scroll bar in the browser window causes the content area to become that much narrower and the wrap div re-centers itself in the narrower content area causing the jump.

One way to eliminate this jump is to force scroll bars onto every page regardless if they need them or not. This may annoy some purists out there, but I think it’s a decent solution.

1
2
3
html    {
     overflow-y:scroll;
}

I just used this in a recent project and it checks out with all browsers including IE6.

Tags:

Comments are closed.