Hola
rakol
En el CSS tienes
#cuadro3 pero ese ID no está presente en ningún elemento del HTML. Supongo que querías decir
contenido_descripccion (que por cierto, ojo que has puesto descripCCion, q no ocurre nada siempre q lo llames siempre así). También al tabular he visto que tienes un
</section> encima de
<!-- Fin Galeria imagenes --> pero no tiene su correspondiente <section> de apertura, elimínalo o crea el <section> más arriba.
Por otra parte, lo que comentas que está "fuera" del contenedor principal, piensa que éste también tiene que flotar y no le has aplicado ningún CSS. Básicamente tiene que flotar todo lo que esté dentro del <body>.
Mira, prueba este código CSS y ponle y quítale el
float:left a
#contenedor_principal y verás más claramente la diferencia entre que un elemento flote y no.
Código PHP:
#cuadro1 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
float: left;
left: 55px;
margin-top: -20px;
}
#cuadro2 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
float: left;
left: 155px;
margin-top: -20px;
}
#contenido_descripccion {
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
float: left;
left: 255px;
margin-top: -20px;
}
#contenedor_principal {
float:left; // Comenta y descomenta este float
background-color:#00FF00;
border:1px solid;
}
Cuando flota, no hay nada de dentro que sobresalga, son como muñecas rusas todo está dentro de otro. Cuando le quitas el float, actúa de forma independiente al resto, con lo cuál hace más difícil cuadrar bien toda la web para todos los navegadores.