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

Quiero que el divexterior, que es negro, envuelva sus 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, las div s flotantes).

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

Author: alex, 2009-04-30
Source

7 answers

Puede establecer el CSS de outerdiv a este

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

También puede 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 el pseudo elemento CSS :after (no es ampliamente soportado en IEs anteriores).

El problema es que los contenedores no se expanden naturalmente para incluir niños flotantes. Tenga cuidado con el uso del primer ejemplo, si tiene elementos hijos fuera del elemento padre, se ocultarán. También puede utilizar 'auto' como el valor de la propiedad, pero esto invocará barras de desplazamiento si aparece algún elemento fuera.

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

 154
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-12 07:12:26

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.

Trabajando la respuesta de Alex (clearfix de & Garret) de "agregar un elemento al final con clear: both", puede 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 CSS en línea no es tan bonito).

 14
Author: Lycana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-18 01:16:29

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 quizás intente ya sea overflow: auto (generalmente funciona), o overflow: hidden, como dijo alex.

 7
Author: DarkWulf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-05 22:59:43

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

Es realmente más limpio.

 4
Author: Nande,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-22 01:11:39

En primer lugar no se utiliza width=300px que es una configuración de atributo para la etiqueta no CSS, utilice 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 para que el div padre se expanda 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í hay un ejemplo de su situación y lo que hace Clearfix para resolverla.

 3
Author: Garrett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-30 00:51:07

Usar jQuery:

Set Parent Height = Child offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}
 1
Author: Harpal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-06 01:20:59

Use clear: both;

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

 0
Author: RonanC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-22 01:12:19