Blueprint CSS: страница перемещается влево, если содержимое длинное

Question

Я использую Blueprint CSS Framework и в настоящее время сталкиваюсь со странной проблемой. Если содержимое моей страницы становится длиннее, чем экран монитора, и нижний колонтитул опускается ниже, тогда вся страница немного сдвигается влево, но если я укорачиваю содержимое и подгоняю его под экран, чтобы был виден нижний колонтитул (без необходимости прокрутки вниз), затем страница снова возвращается на правую сторону.

Я не уверен, но я думаю, его clearfix вопрос. Ты думаешь так же?

Не могли бы вы сказать мне, как решить эту проблему, чтобы страница не переместилась в левую сторону, даже если содержание очень длинное?

Моя структура страницы похожа на следующую

<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

Страница движется, или это потому, что полоса прокрутки вашего браузера появляется / исчезает?

Посмотрите на настройку тела, чтобы всегда иметь полосу прокрутки, которая должна это исправить.

пример

html {
    overflow-y: scroll;
}