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(){
    $('
').css({ position: 'absolute', top: 0, width: '1px', height: ($(window).height() + 1).toString() + 'px' }).appendTo('body'); });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s