En efecto, el
float:left anula el
margin:0 auto
Yo lo que suelo hacer es usar el DIV de centrado debajo del <body>, un simple
margin:Xpx auto; (dónde X equivale al margin-top que quieras, lo digo pq antes tenías
margin-top:-10px y
margin:0 auto, lo cuál sería en realidad
margin:10px auto;). Inmediatamente después del centrado, pongo un DIV que contiene toda la web, que éste sí que flota ya, y a partir de este todos flotan dentro.
Te pego el código referente a los cambios:
Código PHP:
#contenedor_principal {
float:left;
width:100%;
border-left: 1px solid #d3d8dd;
border-right: 1px solid #d3d8dd;
border-bottom: 1px solid #d3d8dd;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top: 15px solid #30aac4;
background-color: #f4f5f6;
box-shadow: 0px 2px 5px 5px #d3d8dd;
}
#centrado {
margin: 10px auto;
width: 1000px;
}
Código PHP:
<body>
<div id="centrado">
<div id="contenedor_principal">
///////////////////////////////////////////////
// Aquí toda la web tal como tenías //
///////////////////////////////////////////////
</div>
</div>
</body>
Creo que ahora sí no?
Por cierto, nuevamente por si te ayuda a comprenderlo todo aun más, prueba a poner estos CSS y observa lo que ocurre:
Código PHP:
#contenedor_principal {
float:left;
width:100%;
}
#centrado {
margin: 10px auto;
width: 1000px;
border-left: 1px solid #d3d8dd;
border-right: 1px solid #d3d8dd;
border-bottom: 1px solid #d3d8dd;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top: 15px solid #30aac4;
background-color: #f4f5f6;
box-shadow: 0px 2px 5px 5px #d3d8dd;
}
Como el DIV centrado no flota y tiene el height automático, no puede saber qué ni cuánto ocupa lo que tenga dentro, por lo tanto la altura sale mal. En consecuencia el fondo, bordeado, y todo, se ve mal. Pero si le metes el DIV flotante dentro, ese sí que sabe cuánto ocupa todo lo de dentro (porque también flota), y por lo tanto es el indicado para tener el color de fondo, bordes, etc.