Высота внешнего div не расширяется с помощью внутреннего div

У меня есть bodyMain div со 100% шириной. Внутри это тело div 800px с автоматической маркой (можно ли использовать "тело" как id?). Внутри это два divs bodyLeft и bodyRight 200px и 600px wide соответственно. Когда я добавляю содержимое во внутренние div, ни тело, ни тело не расширяются по высоте. Все высоты автоматически.

Вот код: http://jsfiddle.net/TqxHq/18/

HTML:

<body>
    <div id="bodyMain">
      <div id="body">
        <div id="bodyLeft"> left text goes here<br />
        </div>
        <div id="bodyRight">Right text goes here
        </div>
      </div>
    </div>
</body>

CSS

#bodyMain{
    border:1px solid red;
    width:100%;
    height:auto;

}
#body{
    border:1px solid green;
    width:804px;
    height:auto;
    margin:auto;
}
#bodyLeft{
     border:1px solid blue;
    float:left;
    width:200PX;
    height:auto;
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600PX;
    height:auto;
}

Ответы

Ответ 1

Вы должны добавить

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

в конце плавающего div, чтобы исправить эту проблему. видеть здесь

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

clear:both
clearfix

Ответ 2

Это обычная проблема при работе с поплавками. Существует несколько общих решений:

  • Добавьте div после поплавков с четким: оба

  • Добавьте два поплавка в контейнер с атрибутом CSS overflow: auto

  • Сделать родительский элемент float

  • Использование псевдоэлемента: после CSS с CSS: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

  • Добавление высоты набора к родительскому элементу

См. статью

Ответ 3

Простым решением является наличие внешнего div-переполнения: hidden (в атрибуте style).

Спасибо

Ответ 4

Чтобы избежать путаницы с предопределенными именами тегов, воздержитесь от использования body, html или head в качестве значений атрибута ID.

Я согласен с идеей Мухаммеда Ирфана. Однако я не согласен с его методом. Избегайте встроенного стиля, за исключением небольших фрагментов. Особенно в этом случае, потому что вполне вероятно, что будет другой случай, когда требуется clear: both. Итак, добавьте div, дайте ему значащее имя класса и примените дополнительный CSS.

Смотрите пример fiddle для примера.

Ответ 5

jsFiddle demo

*{
    margin:0;
    padding:0;
}

#bodyMain{
    position:relative;
    overflow:hidden; /*added*/
    border:1px solid red;
    /*removed height:auto;*/
    /*removed width:100%;*/
}
#body{
    display:table;/*added*/
    border:1px solid green;
    width:804px;
    margin: 0 auto; /*improved*/
}
#bodyLeft{
    border:1px solid blue;
    float:left;
    width:200px;
    /*removed height:auto;*/
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600px;
    /*removed height:auto;*/
}