У меня есть два элемента на странице. контейнер-сетка, который берет фон и внутреннюю сетку, которая должна быть расположена в центре другой сетки. Мой 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-контейнера заполняет только окно, а не всю ширину html. Симптом этого заключается в том, что если вы сузите окно браузера, чтобы требуется горизонтальная полоса прокрутки, и обновили страницу, изображение bg заканчивается там, где заканчивается окно браузера. Когда я прокручиваю вправо, изображения bg там нет. Идеи?
РЕДАКТИРОВАТЬ: хорошо, согласно запросам, я отредактировал мой CSS / HTML. Когда я удаляю обозначение ширины в # grid-container, оно уменьшается до ширины контейнера внутри, что еще хуже. Вот что у меня сейчас:
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>