Auto margin shifts my page content to the left
I found myself wasting about 2 hours of my time trying to understand why only one of my pages moved about 16px to the left when switching back and forth between the different page. My problem is that I was using a template and that everything on the two pages were exactly the same. Here is an example of what I mean.
Using the famous divide-and-conquer problem solving method (ha ha!), I started to remove some text to find out the culprit paragraph, and realized that the problem was only present when I had a lot of content on the page. After a few google searches, I found a thread on sitepoint’s site that explains exactly my problem (titled: Web Page Wiggle Issue and Margin Auto Wiggles & The Vertical Scrollbar). The problem lies in the use of “auto” for centering pages, much like in the very popular “body {margin: 0 auto; width: 960px;}”. This causes the page to wiggle (move to the left) between pages where the vertical scrollbar is needed (longer content) and where it doesn’t appear (firefox adds the scrollbar as needed, whereas IE always keeps it!). From the website, I found two fixes for the problem:
You can easily fix this, using CSS, by adding this one line in your stylesheet:
html {overflow-y: scroll;}
Another fix, if you are using JQuery, is the following:
$(function(){ $('<div/>').css({ position: 'absolute', top: 0, width: '1px', height: ($(window).height() + 1).toString() + 'px' }).appendTo('body'); });
