Elementos DIV anidados

Estoy intentando incluir dos elementos DIV, inner-1 & inner-2, (borde rojo punteado) dentro de un envoltorio DIV (borde verde sólido) pero el elemento DIV del envoltorio no se expande para encerrar los DIV internos .Elementos DIV anidados

¿Qué estoy haciendo mal?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title> Nested divs </title> 
</head> 

<body> 
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
    content inside "wrapper" div 
    <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;"> 
    content <br /> 
    inside <br /> 
    inner-1 div 
    </div> 

    <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
    </div> 
</div> 
</body> 
</html>

Rendered HTML

Fuente

2009-07-06 xraminx

Dado que está flotando tanto en #inner-1 como en #inner-2, necesitará un clear fix. Básicamente, configurar overflow: auto en el padre (#wrapper) debería hacer el truco.

Fuente

2009-07-06 15:30:20 moff

configuración 'ancho: 100%' y 'desbordamiento: oculto' también funciona para el elemento padre – o01

¿Realmente no hay otra solución que usar Javascript? Estoy teniendo el mismo problema, el div externo no tiene ancho sólido, pero usar Javascript parece una solución. – user1226868

El enlace a la solución definitiva en la publicación anterior se ha movido a [aquí] (http://www.sitepoint.com/simple-clearing-of-floats/) –

. 
. 
. 
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
</div> 
<br style="clear:both" /> 
</div> 
. 
. 
.

probar eso.

Puede establecer los márgenes para <br /> de modo que apenas sea visible.

Fuente

2009-07-06 15:29:27

Son las carrozas las que le causan el problema. esto podría funcionar para usted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title> Nested divs </title> 
</head> 

<body> 
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
    content inside "wrapper" div 
    <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;"> 
    content <br /> 
    inside <br /> 
    inner-1 div 
    </div> 

    <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
    </div> 
    <div style="clear: both"></div> 
</div> 
</body> 
</html>

Agregado "div style =" clear: both ">" en la parte inferior de la DIV que contiene.

Fuente

2009-07-06 15:38:55 mupdyke

También podría valer la pena señalar que existen algunos métodos diferentes para "limpiar carrozas". Esta funciona bastante bien para mí y sólo implica la adición de una sola clase de elemento padre:

.clearfix:after{content:"\0020";display:block;height:0;clear:both; 
visibility:hidden;overflow:hidden;}

Fuente

2009-07-06 15:44:15 Rob

Como ya se ha dicho que necesita algún método de forzar el div que contiene a darse cuenta de los divs flotantes han tomado el espacio. Comúnmente conocido como limpiar una carroza, hay bastantes discusiones sobre el tema en Internet.

This post en pathf.com es uno de los más populares de usar. Cuando leas el artículo, asegúrate de leer todos los comentarios también.

Fuente

2009-07-06 16:06:22 wlashell

Respuesta

Cuestiones relacionadas