Centered CSS pages that are longer than one screen appear 5px~ further to the left than shorter ones - how do I stop this?


Tags: css,screen,center

Problem :

This problem has been perplexing me for a while now, and I've tried researching it but so far I've just turned up sites that tell me how to center things but that's not the problem. The problem is that while #content looks like it's centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?

Here's how I'm centering my content:

body {
    margin: 0;
    padding: 0;
}

#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}

I'll admit that there's a couple more divs in there, but I don't that's really relevant to this problem...



Solution :

The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you're noticing.

html {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
}

Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/


    CSS Howto..

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to apply styles to an element with a prefixed ID?

    How to make header in css but im using opacity?

    How to make page layout responsive for every successive little change in window size?

    How to get the scroll bar with CSS overflow on iOS

    How to create a 100% fixed footer with a fixed width center transparent gap?

    how to remove element.style in css

    Unable to show progress bar

    How to format a button with in Form tag, html?

    How classes work in a CSS file? [closed]

    How to add a color overlay to a background image?

    How to unhecked parent checkbox

    How to make arc-in animation on a website - CSS or JavaScript?

    how can assign left of div to left of screen when margin set to auto?

    css: how to make the third div line up with the first div

    How to slide up / slide down an element with Zepto on mobile devices?

    How to apply CSS to the first letter after :before content?

    css how to align a div to the top of a containing div

    How can I resize svg using CSS?

    How can I limit Bootstrap column to a specific column's height?

    How to stop CSS element style from getting into my class style?

    CSS - how to align text and an image vertically?

    css in firefox and ie is rendering old css file…chrome shows new css just fine

    How to do CSS wild card search? [duplicate]

    How do I apply the browser height to a CSS class?

    How to find number of style classes defined in a CSS file

    How to provide a stylesheet for rendering PDFs?

    How to add + and - to my menu tabs [closed]

    How to scale image block using only css?

    How do I isolate an image from the html so that I can edit where it goes on the website?