Paul Rowland Paul Rowland - 20 days ago 8
CSS Question

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>

Answer

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>