Цвет фона css с плавающими элементами

Скажем, у нас есть этот очень простой сценарий

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

И это стиль:

 .content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

 .left {
     float: left;
     height: 300px;
     background: green;
 }

 .right {
     float: right;
     background: yellow;
 }

И дело в том, что... когда я добавляю контент, он должен вытащить родительский div, и нам нужно увидеть красный фон... вещь в том, что я не вижу, чтобы красный фон заполнил всю высоту.

Любые идеи???

Спасибо за тонну.

EDIT: вот скрипка для тестирования

Ответ 1

Когда элементы children перемещаются, они выводятся из потока документа. При этом родитель больше не определяет размеры, так как дети не занимают технически пространство. Таким образом, родительский элемент сворачивается сам по себе. То же самое происходит и при абсолютно позиционировании элементов детей.

В этом случае мы можем исправить это, добавив overflow:hidden к родительскому элементу, тем самым вынудив его содержать дочерние элементы. Альтернативно, overflow:auto работает так же хорошо. Некоторые могут предположить, что это даже лучше, чем overflow:hidden, поскольку вы сможете узнать, выключены ли какие-либо вычисления.

Пример jsFiddle

.content {
    overflow:hidden;
}

Теперь родительский элемент больше не сбрасывается и отображается красный фон.

В противном случае вы можете использовать clearfix, если вы ищете поддержку в старых браузерах, но я не рекомендую это делать.

Ответ 2

Я использую пустой ясный div в конце контейнера содержимого

добавлен CSS:

.clear {
    clear: both;
}

HTML:

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
    <div class="clear"></div>
</div>

Ответ 3

как насчет установки поля и заполнения на 0 во всех div?

Ответ 4

Попробуйте закрыть все скобки для имен классов в макете html и добавить свойство css float:left стиль css класса .content http://jsfiddle.net/u3W79/