Высота обертки div равна 0 с плавающими элементами внутри

У меня есть обертка <div>, которая содержит два внутренних <div>, которые плавают.

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Проблема заключается в том, что оболочка <div> имеет ширину 80 пикселей, так как два внутренних <div> равны 40px каждый. Но всегда оболочка <div> имеет высоту 0px, что делает границу видимой, как строка вверху.

Итак, я разместил два внутренних <div> внутри a <table>. Он работал хорошо. Но как мне избежать этой проблемы, не идя на <table>?

ОТВЕТЫ

Ответ 1

Задайте overflow: hidden для родителя.

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Ответ 2

Внешний div collapsing, потому что два дочерних div внутри него плавают. Самое простое исправление для этого - установить overflow: hidden; на внешний div.

Ответ 3

Попробуйте следующее:

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close