Pregunta de contenedor cuando contiene divs flotantes

Me gustaría crear un envoltorio centrado en el navegador, delimitado, que se autoexparece en altura alrededor de varios divs. Al usar flotantes para mantener los divs en línea, el contenedor simplemente se detiene después del primer div. Se amable, esta puede o no ser la forma correcta de hacerlo, pero es por eso que estoy aquí.Pregunta de contenedor cuando contiene divs flotantes

Aquí hay un ejemplo simple.

<head> 

<style type="text/css"> 
<!-- 
#wrapper { 
height: 100%; 
width: 800px; 
border: 1px solid #000; 
margin-right: auto; 
margin-left: auto; 
} 
#header { 
height: 100px; 
width: 800px; 
} 
#column1 { 
width: 300px; 
height: 400px; 
float: left; 
} 
#column2 { 
height: 400px; 
width: 300px; 
float: left; 
} 
#navbox { 
float: left; 
width: 200px; 
height: 400px; 
} 
--> 
</style> 

</head> 

<body> 

<div id="wrapper"> 

<div id="header">test header</div> 
<div id="navbox">test navbox</div> 
<div id="column1">test column1</div> 
<div id="column2">test column2</div> 

</div><!--Close_wrapper--> 
</body> 
</html>

Fuente

2010-01-15 Scott C.

¿Puedes publicar el html también? – Flatlin3

La respuesta a las preguntas que contienen float y wrap en una frase suele ser

overflow: auto

Si desea que su envoltorio para auto-expandirse en altura, que debe hazlo.

Fuente

2010-01-15 16:32:21

Con mucho, la solución más elegante que encontré para el problema. ¡Gracias! – nunespascal

¡Gran respuesta y con una regla general para empezar! Gracias. –

Necesita agregar un elemento con clear:both después de div s.

Demo

Fuente

2010-01-15 16:34:17 SLaks

Esto es correcto. SLaks publica más rápido que yo. – Wes

Puede añadir algo como < br style = "clear: both"/> como el último elemento en su envoltorio para obligarlo a usar alrededor de sus elementos que están fuera del flujo de contenido.

<div id="wrapper"> 

<div id="header">test header</div> 
<div id="navbox">test navbox</div> 
<div id="column1">test column1</div> 
<div id="column2">test column2</div> 

<br style="clear:both" /> 

</div><!--Close_wrapper-->

Fuente

2010-01-15 16:37:15 Wes

Yo usaría la clase: after psuedo como a continuación. Parece un poco más obvio lo que se supone que debe suceder y un poco menos como rareza del navegador. Estoy seguro de que esa solución de desbordamiento no es oficialmente se supone que funciona.

#wrapper:after { 
    clear:both; 
    display: block; 
    content: " "; 
}

Fuente

2013-07-22 11:03:37 cedd

Pregunta de contenedor cuando contiene divs flotantes

Respuesta

Cuestiones relacionadas