Я использую фреймворк Blueprint CSS и в настоящее время сталкиваюсь со странной проблемой. Если содержимое моей страницы становится длиннее экрана монитора, а нижний колонтитул опускается ниже, то вся страница немного смещается влево, но если я укорачиваю содержимое и помещаю его на экран, чтобы нижний колонтитул был виден (без прокрутки вниз), затем страница снова возвращается к правой стороне.
Я не уверен, но предполагаю, что проблема 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;
}