Hacer que div exterior sea automáticamente la misma altura que su contenido flotante

Question

Quiero que el div externo, que es negro para envolver su div , esté flotando dentro de él. No quiero usar style = 'height: 200px en div con el código 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

Puedes configurar el CSS de outerdiv para esto

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

También puedes hacer esto agregando un elemento al final con clear: both . Esto se puede agregar normalmente, con JS (no es una buena solución) o con : after pseudoelemento CSS (no es ampliamente compatible en IEs anteriores).

El problema es que los contenedores no se expandirán naturalmente para incluir niños flotantes. Tenga cuidado al usar el primer ejemplo, si tiene elementos secundarios fuera del elemento primario, se ocultarán. También puedes usar 'auto' como valor de propiedad, pero esto invocará barras de desplazamiento si algún elemento aparece fuera.

También puedes intentar flotar el contenedor principal, pero dependiendo de tu diseño, esto puede ser imposible / difícil.

Answer 2

En primer lugar, te recomiendo que hagas tu estilo 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.

Eliminando la respuesta de Alex (& amp; Garret's clearfix) de " agregando un elemento al final con clear: ambos " ;, puedes hacerlo así:

    <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 puedes ver, el CSS en línea no es tan bonito).

Answer 3

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

Entonces, tal vez intente con overflow: auto (generalmente funciona), o overflow: hidden , como dijo alex.

Answer 4

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

Es realmente más limpio.

Answer 5

En primer lugar, no utiliza width = 300px , es un ajuste 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 eliminar 2 divs flotantes para que el div principal se expanda para adaptarse 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í hay un ejemplo de su situación y lo que hace Clearfix para resolverlo.

Answer 6

Usa jQuery:

Establecer la altura del padre = Child offsetHeight.

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

Answer 7

Use clear: both;

¡Pasé más de una semana tratando de resolver esto!