Voy a intentar ser muy gráfica, que normalmente me explico bastante mal. Yo haría algunos divs más que contengan a los otros, por qué, pues porque el
padding y el
margin pueden generarte problemas de compatibilidad entre navegadores, puedes usarlos obviamente, pero limitar su uso te ahorrará muchos quebraderos de cabeza.
Te pongo una foto de cómo lo veo yo:
El div rosa contendría a todos los demás, lo cual te será útil de cara al centrado en pantalla, el div amarillo contiene menu, otro menu y contenido, y el verde, que a su vez que contiene menu y otro menu. Luego ya colocarlos con
float:left
Ahora te pongo el código para hacerlo tal como te digo, modifica medidas y colores a necesidad, que los puse a boleo y casi provocan epilepsia xD
Código:
/* Código CSS*/
body {
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
background: #f9c;
margin: 0;
padding: 0;
}
.container {
width: 955px;
background: #f09;
margin: 0 auto;
}
.cabecera1 {
width: 955px;
height: 50px;
background: #c9f;
}
.cabecera2 {
width: 955px;
height: 150px;
background: #99f;
}
.botonera {
width: 955px;
height: 30px;
background: #09f;
}
.contenido {
width: 955px;
height: 538px;
background: #c9f;
}
.izquierda {
width: 255px;
height: 538px;
background: #ccc;
float: left;
}
.menu {
width: 255px;
height: 138px;
background: #fff;
}
.otromenu {
width: 255px;
height: 400px;
background: #ddd;
float: left;
}
.derecha {
width: 700px;
height: 538px;
background: #000;
float: left;
}
<!-- Código del XHTML -->
<div class="container">
<div class="cabecera1"></div>
<div class="cabecera2"></div>
<div class="botonera"></div>
<div class="contenido">
<div class="izquierda">
<div class="menu"></div>
<div class="otromenu"></div>
</div>
<div class="derecha"></div>
</div>
</div>
Lo he probado en varios navegadores y funciona, ya nos cuentas si te funciona o te sirve
