Ever noticed how in some sites when a non-full width design is used, the design jumps slightly when the page is shorter than the full screen? This is because in Firefox, the vertical scrollbar tucks itself away when it is not needed i.e. the page is shorter than the screen display. This doesn’t happen in IE.

The result is a s lightly jarring effect but luckily there is a simple fix…

In your CSS statements, either in your style sheet or in the HEAD section of the page, add the statement:

html {height:100%;margin-bottom:1px;}

What this basically does is fool the browser into thinking that the page is filling the screen vertically so it will show the scroll bar. The result is that the design no longer shifts as the vertical scrollbar is always displayed.

In the words of the tic-tac advert, neat huh? 😉