Вложенные div с плавающей точкой

Question

Я пытаюсь вложить три элемента div во внешний элемент div. проблема в том, что вложенные div не увеличивают внешний.

CSS выглядит следующим образом:

.page {display: block;  width: 96%;}
.page .left-content {display: inline-block; float:left; width: 15%;}
.page .middle-content {display: inline-block; float:left; width: 70%;}
.page .right-content {display: inline-block; float:left; width: 15%;}

HTML, который я хочу сделать:

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
</div>

присвоение цвета фона классу страницы показывает, что div класса страницы имеет неправильный размер. Как мне решить это?

Answer 1

Оболочка должна очищать содержимое DIV.

.page {
    overflow: hidden;
    *zoom: 1; /* for ie6/7 */
}

Никакой дополнительной разметки не требуется. Также взгляните на метод очистки Аслетта: http://www.positioniseverything.net/easyclearing.html

Answer 2

Волшебное исправление

Стандартный метод создания внешнего контейнера для «вложенного» вложенного поплавка заключается в размещении полного «очищенного» элемента, последнего в контейнере, что приводит к «перетаскиванию» нижнего края содержащего элемента. коробка ниже поплавка.

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

<div> <!-- float container -->

  <div style="float:left; width:30%;"><p>Some content</p></div>

  <p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

Answer 3

Я добавил clear и убедился, что каждый контент div имеет margin и padding обнуленные

http://jsfiddle.net/c4KLc/3/

.page .right-content, .page .left-content, .page .middle-content 
{
    border: none;
    padding: 0; 
    margin: 0;
}

.clear { 
    clear: both; 
    line-height: 0;
}

Если у любого из ваших плавающих div s есть стили padding, border или margin, ширина с плавающей запятой будет отключена, так как вы делаете% width

Answer 4

Измените HTML на

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
    <div style="clear: both;"></div>
</div>