Cómo hacer que un div interno empuje el div externo hacia abajo

Question

Supongamos que tengo un div. Dentro de este div, tengo dos divs flotantes a la izquierda, uno al lado del otro, creo. La div izquierda es para una imagen. Por alguna razón, cuando la imagen es demasiado alta, no empuja el div externo para que se ajuste a la imagen. En cambio, la imagen simplemente continúa por sí misma y va "más allá" del borde inferior del div externo. ¿Cómo puedo hacerlo para que la imagen también expanda la div externa?

<div> 
    <div class="left"> 
    </div> 

    <div class="right"> 
    </div> 
</div> 

Answer 1

añadiendo "overflow: auto;" o "overflow: hidden;" al div que contiene son buenas soluciones (cada una con sus propios caprichos dependiendo del escenario exacto, pero muy confiable). Deberá agregar hasLayout para que esto funcione en IE. Más fácil es añadir:

.container { 
    overflow: hidden; 
    display: inline-block; /* triggers hasLayout in IE */ 
} 

.container { 
    display: block; /* back to block */ 
} 

Más opciones aquí: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 2

<div style="overflow: auto"> 
    <div class="left"> 
    </div> 

    <div class="right"> 
    </div> 
</div> 

Answer 3

Si usted tiene un div con dos elementos, el uno más grande que no está flotando empujará el div exterior. Si tiene un div con dos elementos flotados, necesitará un div con un claro: ambos para permitir que todo se empuje hacia abajo.