CODEWITHSUNDEEP
jqueryhtmlcss
Paul Rowland
Paul Rowland

Reputation: 8352

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

I'm using a "Centred Header/Footer/2 column CSS" layout.

In test1.htm if their is minimal page content and the page footer is fully visible within the browser window then when you click on test2.htm the page content shifts to the left.

If test1.htm has enough content to push the footer off the bottom of the browser window then when you click on test2.htm the page content stays static.

Can anyone help with this css issue?

test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

<style type="text/css">

body, html 
{
    margin:0;
    padding:0;
    font-size: 1em;
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
}   

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

#header 
{
    background-color:Gray;
    height: 120px;
}

#leftColumn 
{
    float:left;
    width:230px;
    padding: 0 10px 10px 10px;
    background:Red;
}

#rightColumn 
{
    float:right;
    width:642px;
    padding:10px;
    background:#fff;
    font-size: 0.7em;
    color: #828589;
}

#footer 
{
    clear:both;
    padding:5px 10px;
    background-color:Gray;
}



</style>    

</head>


<body>
  <div id="wrap">
    <div id="header">
      <div id="nav">
       <a href="test1.htm">test1</a> <a href="test2.htm">test2</a> 
      </div>
    </div>
    <div id="leftColumn">
      <p>
      left column
      </p>   
      <br /><br /><br /><br /><br /><br />
    </div>
        <div id="rightColumn">
          <div id="PageContent">

      <!-- START PAGE CONTENT -->

        <h1>Page Title </h1>
        <h4>"test 1 "</h4>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...
        <!-- 
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        -->

      <!-- END PAGE CONTENT -->
      </div>



    </div>
    <div id="footer">

      the footer

    </div>
  </div>
</body>
</html>

test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

<style type="text/css">

body, html 
{
    margin:0;
    padding:0;
    font-size: 1em;
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
}   

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

#header 
{
    background-color:Gray;
    height: 120px;
}

#leftColumn 
{
    float:left;
    width:230px;
    padding: 0 10px 10px 10px;
    background:Red;
}

#rightColumn 
{
    float:right;
    width:642px;
    padding:10px;
    background:#fff;
    font-size: 0.7em;
    color: #828589;
}

#footer 
{
    clear:both;
    padding:5px 10px;
    background-color:Gray;
}

* html #footer {
    height:1px;
}  



</style>    

</head>


<body>
  <div id="wrap">
    <div id="header">
      <div id="nav">
       <a href="test1.htm">test1</a> <a href="test2.htm">test2</a>  
      </div>
    </div>
    <div id="leftColumn">
      <p>
      left column
      </p>   
      <br /><br /><br /><br /><br /><br />
    </div>
        <div id="rightColumn">
          <div id="PageContent">

      <!-- START PAGE CONTENT -->

        <h1>Page Title </h1>
        <h4>"test 2 "</h4>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        some words...
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

      <!-- END PAGE CONTENT -->
      </div>



    </div>
    <div id="footer">

      the footer

    </div>
  </div>
</body>
</html>

Upvotes: 4

Views: 21772

Answers (10)

Kim
Kim

Reputation: 1

Many thanks, guys. I was having the same text-shifting issue tonight and was fortunate to find this site and your above suggestions.

My two pages were behaving the same way--one created a scrollbar and the other did not. The text-shifting issue was resolved by adding the following code to the style.css file:

html { overflow:scroll; }

Upvotes: 0

Gooby
Gooby

Reputation: 1

If you are loading javascript to display a facebook like button or from another source like that, the page will load the facebook div that is placed there then get rid of it again causing a shift. Try using css for the fix to give that facebook/whatever div a set height.

Upvotes: -1

Elliott
Elliott

Reputation: 75

For my site there was no "wiggle" between pages in Safari— I only noticed it in Firefox, and Paul Rowland's suggestion to use overflow: scroll works perfectly, because the site is unaffected in Safari but corrected in Firefox. Very helpful and thanks!

I can't believe that on this site suggestions such as "don't worry about it" don't get down voted to oblivion.

Upvotes: 1

Ray
Ray

Reputation: 31

Why do all that when all you have to do keep the scrollbar always visible!

html{
   height:101%;
}

Upvotes: 3

Louis
Louis

Reputation: 21

height: 100%;
overflow-y:scroll;

Upvotes: 2

Emily
Emily

Reputation: 10088

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?

Upvotes: 1

Paul Rowland
Paul Rowland

Reputation: 8352

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>

Upvotes: 3

Quentin
Quentin

Reputation: 944320

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)

Upvotes: 11

AnthonyWJones
AnthonyWJones

Reputation: 189525

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.

Upvotes: 3

Svitlana Maksymchuk
Svitlana Maksymchuk

Reputation: 4440

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...

Upvotes: 4

Related Questions