ansaurus

Question

Why does the content of this page shift a few pixels to the left/right?

Answer 1

+3 A:

This happens because test2.htm has scrollbar at the right -> that makes width of test2.htm less than the width of test1.htm -> centered content position is counted by browser taking different width values => that is why left position is different in each case...

Svitlana Maksymchuk 2009-06-02 09:33:56

Answer 2

+3 A:

Your auto margin for left and right of the #wrap div is causing the whole content to be centered in the available width of the body. In test2 the available width is reduced by the appearance of the scroll bar hence the content appears to shift left by half the scroll bar width.

AnthonyWJones 2009-06-02 09:34:31

Answer 3

+7 A:

It sounds like the first page is short enough to be displayed without scroll bars, while the second page is not.

A scroll bar takes up space, so the canvas is narrower, so the centre of the canvas is further away from the scrollbar.

The solutions are either to use overflow to display a scrollbar all the time (I wouldn't suggest this, it affords scrolling when scrolling can't happen) or use a left aligned design (like the majority of the WWW)

David Dorward 2009-06-02 09:35:43

I'd argue most of the web has a fixed width container, centered on the screen design. Not my favorite, but certainly the worlds.

rpflo 2009-06-02 13:49:15

Answer 4

+1 A:

So it appears the page with more content forces the browser window to have a scroll bar, this in turn pushes the centred div to the left as the available area has been reduced by the appearance of the scroll bar.

So possible solution is to not have a centred div, ie change the wrap id css to

#wrap 
{
    width:912px;
    margin:0 0 0 0;
    background:Green;
}

this didnt look to good with what I was working with.

Another solution was the overflow, ie adding this

  html
  {
    overflow:scroll; 
  }

this actually looks ok, so will probably go with it.

I did find another solution using JQuery based on this

update #wrap to

#wrap 
{
    width:912px;
    margin:0 0 0 0;
    background:#fff;
        visibility: hidden;
}

then use the following in each page

  <script type="text/javascript">
    jQuery.fn.center = function() {
      this.css("position", "absolute");

      // Use This line On 'Short Page Content'
      this.css("left", ($(window).width() - (this.width()+18)) / 2 + $(window).scrollLeft() + "px");

      // Use This line On 'Long Page Content'
      this.css("left", ($(window).width() - (this.width())) / 2 + $(window).scrollLeft() + "px");


      return this;
    }

    $(document).ready(function() {
      $('#wrap').center();
      $('#wrap').css("visibility", "visible");
    });

  </script>

Paul Rowland 2009-06-02 11:42:03

Answer 5

+1 A:

Your best bet is not to worry about the scroll bar. You are fixing a "problem" that does not exist. Every centered website has the same issue.

It is "expected behavior" and none of your users are going to notice that your page moves a couple of pixels to the left -- especially if there is a page refresh.

Think about it -- have you ever noticed this on other sites?

Emily 2009-06-02 12:00:17

ansaurus

tags:

views:

answers:

Why does the content of this page shift a few pixels to the left/right?

related questions