subtitulos - tag css en html
La altura de los padres no sigue a sus hijos flotantes (3)
Añadir overflow:hidden; al contenedor:
#mainContainer{
width: 1000px;
/*height: 1000px;*/
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ff6600;
padding-bottom: 20px;
overflow: hidden; /* <--- here */
}
Debido a que su contenido es flotante, el contenedor div colapsa. Al usar una clase ''clearfix'' o, como mencioné, agregar overflow:hidden hará que el contenedor contenga los elementos flotantes.
ACTUALIZACIÓN Explicación de por qué esto funciona se puede encontrar aquí: https://stackoverflow.com/a/9193270/1588648
... y aquí:
Para que ellos (los navegadores) calculen lo que desbordó los límites del bloque (y, por lo tanto, deberían estar ocultos), tenían que saber el tamaño del bloque. Debido a que estos bloques no tienen un conjunto de altura explícito, los navegadores usaron la altura calculada del contenido.
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
Esta pregunta ya tiene una respuesta aquí:
La altura de mi mainContainer no sigue el ancho de sus hijos
y aquí está mi código, ¿tiene alguna sugerencia por favor avise.
Necesito la solución CSS no JavaScript así que gracias de antemano
<div id="mainContainer">
<div id="leftContent">
</div>
<div id="rightContent">
</div>
</div>
y aqui esta mi css
#mainContainer{
width: 1000px;
/*height: 1000px;*/
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ff6600;
padding-bottom: 20px;
}
#leftContent{
height: 100px;
float: left;
width: 380px;
background-color: violet;
}
#rightContent{
height: 100px;
float: right;
width: 620px;
background-color: yellow;
}
Desbordamiento de uso: oculta y limpia un flotador
#mainContainer{
width: 1000px;
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ff6600;
padding-bottom: 20px;
overflow: hidden;
clear: both;
}
Necesita borrar sus elementos flotantes, use overflow: hidden; para #mainContainer
Alternativo: (Puede agregar clear: both; para borrar flotantes)
O también puede borrar elementos flotantes (solo si desea admitir IE9 = +
.clear:after {
content: "";
clear: both;
display: table;
}