У меня есть два div на странице. контейнер-сетка, который берет фон и внутреннюю сетку, которая должна быть расположена в центре другой сетки. Мой css:
html, body{
margin:0;
padding:0;
width:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
width:100%;
}
#grid{
width:1140px;
margin:0px auto;
}
На этом этапе bg-образ # grid-container заполняет окно, а не всю ширину html. Симптомом этого является то, что если вы сузите окно браузера, чтобы горизонтальная полоса прокрутки была необходима и обновляла страницу, изображение bg заканчивается там, где заканчивается окно браузера. Когда я прокручиваю направо, изображение bg отсутствует. Идеи?
EDIT: нормально, для каждого запроса я редактировал свой css/html. Когда я удаляю обозначение ширины в # grid-контейнере, он сжимается до ширины контейнера внутри, что еще хуже. Вот что у меня сейчас:
html, body{
margin:0;
padding:0;
min-width:1140px;
}
body{
background:url(../images/page-background.jpg) repeat-x top left !important;
height:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
padding-top:1px;
}
#grid-container2{
width:1140px;
margin:0px auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
и html:
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>