Have you ever been to a website where the pages shift when navigating from one page to another? The author of a particular site may have done an incredible job of designing a world-class theme, but the ocassional page shift can be a cause of irritation to some including myself. So, what causes page shifts? How do you get rid of it?
First of all, the cause. All browsers including the popular Mozilla’s Firefox and Microsoft’s Internet Explorer add a vertical scrollbar to webpages that do not fit the screen. A typical monitor screen usually has a resolution of 1028 x 768. Some screens have slightly lower resolution at 800 x 600 and a few at 1280 x 1024. The vertical resolution is the second number. So, a typical screen has a vertical resolution of 600, 768 and 1024 pixels.
No matter how big your screen size a great deal of web pages will exceed the vertical resolution of your screen. That’s a fact. For pages that either too long or too tall, all browsers add a vertical scroll bar to the page for navigation purposes. Users can either use the Page UP or Page Down keys, the Up and Down arrow keys, or the click-wheel which are available on the latest computer mouse for navigation purposes.
Now a few browsers such as Firefox are configured by default to hide the vertical scrollbar for pages that fits a user’s screen. The difference in width when the vertical scrollbar is on and off causes some webpages to shift left to right and vice versa. This especially true for webpages that are styled centrally. The page shifting is the cause of the irritation.
To eliminate the page shift, just add the following code to your CSS stylesheet. This code eliminates page shifting by forcing a vertical scrollbar to show up regardless of the height of the page whether it fits or exceeds the vertical resolution. The effect is you will always have a scrollbar present regardless of page height. It might look odd at first when you have a scrollbar that does not scroll, but people usually do not notice it. Chances are, they don’t even know.
html { min-height: 100%; margin-bottom: 1px; }
For Firefox 3.5 or later, please add:
html { overflow: -moz-scrollbars-vertical !important; }
