L'altezza div Wrapper è 0 con elementi flottanti all'interno

Question

Ho un wrapper <div> che contiene due interni <div> s che sono mobili.

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

Il problema è l'involucro <div> ha larghezza di 80px poiché due interno <div> sono 40px ciascuna. Ma sempre il wrapper <div> è 0px di altezza che fa apparire il bordo come una linea in alto.

Quindi ho inserito i due interni <div> all'interno di uno <table>. Ha funzionato bene. Ma come evito questo problema senza andare a <table>?

Answer 1

Impostare overflow: hidden sul genitore.

<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

Prova questa:

<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

L'esterno div è collapsing perché i due bambini div s all'interno di esso sono galleggianti. La soluzione più semplice è impostare overflow: hidden; sull'esterno div.