Css 100% ширина div не занимает полную ширину родительского

У меня есть два 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>

Ответы

Ответ 1

Проблема вызвана тем, что #grid имеет width:1140px.

Вам нужно установить min-width:1140px на body.

Это приведет к тому, что значение body будет меньше, чем #grid. Удалите width:100%, поскольку элементы уровня блока используют доступную ширину по умолчанию. Пример в реальном времени: http://jsfiddle.net/tw16/LX8R3/

html, body{
    margin:0;
    padding:0;
    min-width: 1140px; /* this is the important part*/
}
#grid-container{
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
    width:1140px;
    margin:0px auto;
}

Ответ 2

Удалите объявления width:100%;.

Элементы блока должны по умолчанию использовать всю доступную ширину.

Ответ 3

html, body{ 
  width:100%;
}

Это говорит о том, что html будет на 100% шире. Но 100% относится ко всей ширине окна браузера, поэтому не более того.

Вместо этого вы можете установить минимальную ширину.

html, body{ 
  min-width:100%;
}

Таким образом, это будет как минимум на 100%, бот при необходимости.