Skip navigation
Angusdog
Angusdog Calculating status...
Currently Being Moderated

noob: Adding text shifts my page over to the left

Jun 18, 2012 9:21 PM

Okay, I've got seven or so pages mocked up with header div, nav div and then a content div. the body tag has a max width of 960px and auto left & right (so centered on the page).

 

On all the pages so far, they all line up sweet.

 

On one, when I paste some text (roughly an A4 page worth) into the content div, the whole page shifts to the left by about 10 pixels. Header div, nav div and content div.

 

The text is just plain, unstyled text with no CSS applied.

 

It's doing my head in - that particular page 'jumps' to the left, whereas all the other pages are perfect.

 

TIA,

 

Simon.

355 Views   2 Replies   Latest reply: Angusdog, Jun 19, 2012 1:31 PM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    Jun 18, 2012 9:40 PM   in reply to Angusdog
    Report

    The page shift to the left is caused by the appearance of the vertical browser scroll bar on pages where the content is more than a screen deep (therefore requiring scrolling).

     

    Where the content is less than a screenful, the scrollbar disappears and the page shifts to the right.

     

    http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forci ng-a-scroll-bar/

     

    The usual fix is to add the following rule to your CSS stylesheet

     

    html {
    overflow    -y: scroll;
    }

    This forces a scrollbar to appear on every page (thereby eliminating the page shift) whether it is required by the amount of content or not.

     
    |
    Mark as:
  • Angusdog
    Currently Being Moderated
    2. Angusdog,
    Jun 19, 2012 1:31 PM   in reply to John Waller
    Report

    Hi John,

     

    Perfect - thanks for that.

     

    Simon.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points