Forcing a Scroll Bar to Prevent Horizontal Shift on Short Web Pages

Note that while this page is short on content, it still has a scroll bar. See the CSS that is applied for a trick to force a scroll bar on short pages or pages without much height. By default, some browsers (such as Firefox) remove the scroll bar chrome area if it is not needed which can cause some "centered" pages to appear to shift to the right when they don't have a scroll bar compared to other pages that do. One solution is to add a height of 100% to the html and body tags and then a bottom-margin of 1px. This forces the page to think that it is at least 1px taller than the screen, and thus always need a scroll bar. The CSS code is below and also available by viewing the source.

 

/*Use this code to force the scrollbar by adding 1px extra to the page heights*/
html, body {
height: 100%;
margin-bottom: 1px;
}