Question

I am using Blueprint CSS framework and currently facing a strange problem. If the content of my page gets longer than the monitor screen and the footer goes below, then the entire page moves a bit to its left side, but if I cut short the content and make it fit withing the
screen so that the footer is visible (without having to scroll down), then the page moves back to the right side again.

I am not sure but I am guessing its clearfix issue. Do you think the same?

Could you please tell me how to fix this problem so that the page doesn’t move to the left side even if the content is very long?

My page structure is like following

<div class="container"> 

   <div id="header" class="span-24 "> Header </div>

   <div id="content" class="span-24" >My Main Content with two columns </div>

  <div id="header" class="span-24 "> Header </div>

</div>

CSS

#header{
margin-top:5px;
background-color:#333333;
border: solid 1px #333333;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
height:70px;
}

#content{
margin-top:2px;
min-height:500px;
font-size:12.5px;
line-height:30px;
background-color:#FFFFFF;
color:#404348;
font-family: 'Open Sans', sans-serif;
text-align:justify;
background-color:#FFFFFF; 
min-height:600px;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

#footer{
height: 4em;
background-color:#FFFFFF;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

Answer 1

Is the page moving, or is it because your browsers scrollbar is appearing/disappearing?

Look into setting the body to always have a scrollbar, that should fix it.

Example

html {
    overflow-y: scroll;
}