Размер обертки, отражающий его содержание

Question

Взгляните на эту скрипку .

Я озадачен, почему #wrapper не расширяется, чтобы вместить в него элементы div. Чего здесь не хватает?

Как примечание, есть идеи, почему мой <hr> не отображается должным образом?

Answer 1

Оболочка не расширяется, потому что элементы внутри нее плавают и выводятся из естественного потока документа.

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

#wrapper:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}

Кроме того, у вас установлена ​​высота обертки 100px.

Вот обновленная версия вашей скрипки: http://jsfiddle.net/kWJ79/9/

Что касается вашего hr, что именно вы хотите сделать?Похоже, вы хотите создать вертикальную черту между двумя делителями.Это правильно?

ОБНОВЛЕНИЕ

Если вы хотите создать линию между левым и правым делением, я бы рассмотрел немного другой маршрут.

Что бы я сделал, это поместил левый div в свой собственный контейнер, который имеет правый отступ, поле и рамку.Таким образом, в вашем коде нет избыточного элемента div, что исключает необходимость использования hr.

Вот обновленная скрипка с этим примером: http://jsfiddle.net/kWJ79/15/

#left_wrapper{
    margin-right:5px;
    padding-right: 5px;
    border-right:1px solid red;
    float:left;
}

Обратите внимание, что я удалил float:left; из #left div и поместил вместо него #left_wrapper.

Answer 2

Вы указали значение высоты.