Haga que el div externo sea automáticamente de la misma altura que su contenido flotante

Question

Quiero el exterior div, que es negro para envolver su div s flotando dentro de él. No quiero usar style='height: 200px en el div con el ID outerdiv ya que quiero que sea automáticamente la altura de su contenido (por ejemplo, el div s flotante).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'> 
<div style='width=300px;border: red 1px dashed;float: left;'> 
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
</div> 

<div style='width=300px;border: red 1px dashed;float: right;'> 
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
</div> 

¿Cómo lograr esto?

Answer 1

Es posible ajustar la CSS outerdiv 's a este

#outerdiv { 
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */ 
} 

También puede hacer esto mediante la adición de un elemento al final con clear: both. Esto se puede agregar normalmente, con JS (no es una buena solución) o con el pseudo elemento CSS :after (no ampliamente admitido en IEs anteriores).

El problema es que los contenedores no se expandirán de forma natural para incluir a los niños flotados. Tenga cuidado con el uso del primer ejemplo, si tiene elementos secundarios fuera del elemento principal, estarán ocultos. También puede usar 'auto' como el valor de propiedad, pero esto invocará barras de desplazamiento si algún elemento aparece afuera.

También puede intentar flotar el contenedor primario, pero esto puede ser imposible/difícil según su diseño.

Answer 2

Es posible que desee probar los flotadores de cierre automático, como se detalla en http://www.sitepoint.com/simple-clearing-of-floats/

Así que tal vez intente cualquiera overflow: auto (por lo general funciona), o overflow: hidden, como dijo Alex.

Answer 3

En primer lugar, no usa width=300px que es una configuración de atributo para la etiqueta, no CSS, use width: 300px; en su lugar.

Sugeriría aplicar la técnica clearfix en el #outerdiv. Clearfix es una solución general para borrar 2 divs flotantes por lo que el div principal se expandirá para acomodar los 2 divs flotantes.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'> 
    <div style='width:300px; float: left;'> 
     <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
    </div> 

    <div style='width:300px; float: left;'> 
     <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
    </div> 
</div> 

Aquí es un example de su situación y lo hace Clearfix para resolverlo.

Answer 4

En primer lugar, le recomiendo que haga su estilo de CSS en un archivo CSS externo, en lugar de hacerlo en línea. Es mucho más fácil de mantener y puede ser más reutilizable usando clases.

Trabajar fuera la respuesta de Alex (& clearfix de Garret) de "añadir un elemento al final con claro: tanto", puede hacerlo de esta manera:

<div id='outerdiv' style='border: 1px solid black; background-color: black;'> 
     <div style='width: 300px; border: red 1px dashed; float: left;'> 
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
     </div> 

     <div style='width: 300px; border: red 1px dashed; float: right;'> 
      <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
     </div> 
     <div style='clear:both;'></div> 
    </div> 

Esto funciona (pero como se puede ver en línea CSS no es tan bonito).

Answer 5

Uso de jQuery:

Set Parent Altura = offsetHeight Niño.

$(document).ready(function() { 
    $(parent).css("height", $(child).attr("offsetHeight")); 
} 

Answer 6

Uso clear: both;

Me pasé más de una semana tratando de resolver esto!

Answer 7

Sé que algunas personas me odiarán, pero he encontrado display:table-cell para ayudar en estos casos.

Es realmente más limpio.