CSS не расширяется

Question

Почему родительский div не расширяется, чтобы соответствовать внутренним divs?

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;"> 
<div style="float: left; width: 500px; border-bottom: 1px solid black;"> 
    Menu 
</div> 
<div style="float: left; width: 500px;"> 
    text goes here 
</div> 

http://jsfiddle.net/C7MHY/1/

Answer 1

Поскольку внутренние дивы плавают. Вы можете добавить «clearer» (элемент с свойством CSS clear, установленным в left или both) после плавающих divs для достижения того, чего вы хотите.

В качестве альтернативы вы можете добавить float: left к внешнему div. Все плавающие элементы внутри другого плавающего элемента «очищаются автоматически».

См http://jsfiddle.net/vovkss/WcSyM/

Answer 2

Поскольку внутренние дивы оформлены в виде поплавка. Чтобы преодолеть это, вы должны добавить еще один внутренний DIV так:

<div style="width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;"> 
<div style="float: left; width: 500px; border-bottom: 1px solid black;"> 
    Menu 
</div> 
<div style="float: left; width: 500px;"> 
    text goes here 
</div> 
<div style="clear:both;"></div> 
</div> 

Для дальнейшего чтения:
MDN: float
MDN: clear

Answer 3

Я не знаю, как объяснить, но если поместить дисплей: таблица на вашем родительском DIV.

<div style="display: table; width: 800px; border: 1px solid black; margin-left: auto; margin-right: auto;"> 
    <div style="float: left; width: 500px; border-bottom: 1px solid black;"> 
     Menu 
    </div> 
    <div style="float: left; width: 500px;"> 
     text goes here 
    </div> 
</div> 

Answer 4

В дополнении к очистке поплавков (как указано в других ответах) ...

в качестве альтернативы, вы можете также добавить правило

overflow:hidden или overflow:auto к родительским делам.

FIDDLE

Answer 5

Там нет высоты для родительского DIV, попробуйте использовать высоту: авто.