div float:left

[aldairlinux]

hola tengo un problema lo que pasa es que tengo unos div la cual son float:left;
y son dinámicos y se escapan del contenedor

Código CSS:

#n1{
float:left;
height:50px;
width:100px;
}
#n2{
float:left;
height:50px;
width:100px;
 
}
#n3{
float:left;
height:50px;
width:100px;
 
}
#contenedor{
width:200px;
height:auto;
}
 

Código HTML:

<div id="contenedor">
<div id="n1"></div>
<div id="n2"></div>
</div>
 

Al momento de agregar el div n3 el div contenedor no baja, el div n3 sale por fuera del contenedor !
como ago para que el contenedor se ruede con el div n3 ?

Código HTML:

<div id="contenedor">
<div id="n1"></div>
<div id="n2"></div>
<div id="n3"></div>
</div>
 

[ipraetoriux]

debes agregarle position relative a las capas

[pzin]

Al tener elementos flotados no puede crecer. La solución mas limpia pasa por aplicar overflow al div#contenedor.

Código CSS:

#contenedor{
  width: 200px;
  overflow: hidden;
}
 

Comúnmente conocido como clearfix. Así vamos pisoteando el idioma.

La altura automática se la puedes quitar.