Una rápida respuesta sería mas o menos así:
Código HTML:
Ver original<div id="wrapper"> ancho 100%
<img src="logo"/> <!-- como es el logo no debe ir como fondo -->
slider
contenido
Código CSS:
Ver original#wrapper{
background: gris; /* igual que contenido */
width:100%;
}
#top{
background: grisoscuro /* igual que menu */
margin:0 auto;
width:100%;
height:auto; /* o la necesaria para que contenga el menu */
}
#menu{
background: grisoscuro;
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px; /*aunque se recomienda 960px */
}
#logo{
background: blanco ;
width:100%;
text-align:center; /* en caso de meter la imagen directamente sin caja (div) */
}
#logo img{
margin: 0 auto;
width:1060px;
}
#content{ /*que está en el css del slider */
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px;
}
#contenido{
background:grisclaro; /*igual que wrapper */
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px;
}
footer{
background: negro;
width:100%;
}
footer section {
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px;
}
Espero que entiendas lo que quise decir.
Saludos
Por las dudas un burdo ejemplo:
http://jsfiddle.net/c2am/7PumF/1/embedded/result/