La altura div del envoltorio es 0 con elementos flotados dentro de

Question

Tengo un envoltorio <div> que contiene dos <div> s interiores que flotan.

<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> 

El problema es la envoltura <div> tiene anchura de 80px ya que dos interior <div> son 40px cada uno. Pero siempre el contenedor <div> es 0px de alto, lo que hace que el borde parezca una línea en la parte superior.

Así que coloqué los dos interiores <div> s dentro de un <table>. Funcionó bien Pero, ¿cómo puedo evitar este problema sin pasar por un <table>?

Answer 1

Establezca overflow: hidden en el elemento principal.

<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> 

Answer 2

Prueba esto:

<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 

Answer 3

El exterior es divcollapsing porque los dos niños div s dentro de ella están flotando. La solución más fácil para esto es establecer overflow: hidden; en el exterior div.