Содержащий div меньше детей

Учитывая следующее

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}

<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

Ответ 1

Вы должны очистить свои поплавки. Вы можете сделать это через класс clearfix:

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}

<div id='container' class="clearfix">
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

Ответ 2

Это связано с тем, что floats не являются частью макета, пока не будут очищены.

Ответ 3

A float, как и некоторые другие "команды" (например, position relative/absolute/fix), удаляет элемент из обычного потока рендеринга.
Один результат, он больше не влияет на его способ родительского элемента рендеринга.

Вы можете просветить себя здесь

Ответ 4

перед закрытием большого div добавить a <div id="clear"></div> и в css добавить #clear {clear: both;}

Ответ 5

Установите для позиции абсолютное значение для контейнера, что устраняет проблему. http://jsbin.com/ifojug/1/ jsfiddle почему-то не работает в моем браузере