tienes que darle 100% de width a todos los divs, te recomiendo que uses un class y sentencies ESE CLASS en css..
Agrega estas líneas de código:
Cita: *{
margin:0px;
padding:0px;
}
body{
margin:0;
padding:0;
background-color:#E3CEB5;
}
#top, #menu{
width:100%;
background-color:#46321A;
}
#top{
position:absolute;
margin-top:-15px;
z-index:1;
height:50px;
}
#header{
background-image:url(img/background3.jpg);
width:100%;
background-repeat:repeat;
height:435px;
margin-top: 40px;
box-shadow: 0px 5px 5px #3C2211;
position:absolute;
z-index:1;
}
#menu{
height:100px;
box-shadow: inset 0px -5px 5px #3C2211;
margin-top:-25px;
}
.cienporciento{
width: 100%; !important
overflow:auto; !important
}
Quedando el código HTML así:
Cita:
<body>
<div id="top"
class="cienporciento"></div>
<div id="header"
class="cienporciento"></div>
<div id="menu"
class="cienporciento"><div id="navi">
<ul>
......
</ul>
</div></div>
</body>
Te explico un poco:
Cita:
*{ /* La Etiqueta "*" se integra a TODAS las etiquetas de tu HTML, desde <BODY> hasta <HTML> */
margin:0px; /* Margen de "0px" a todas las etiquetas para eliminar el margen hacia los extremos */
padding:0px; /* Padding de "0px" a todas las etiquetas para eliminar el margen interior del Body y de todos los divs, saltos de línea, etc. */
}
.cienporciento{ /* Después de agregar la etiqueta "cientoporciento" a los divs, se agrega este css Sentenciando el Tamaño total */
width: 100%; !important [/B] /* 100% para que quede pegado a todos los bordes, tanto derecho como izquierdo */
overflow:auto; !important [/B] /* Overflow auto para que cuando se hagan los cambios en pixelaje (maximizar, minimizar, etc.) se autoajuste el tamaño de los divs
manteniento el 100% del div, pero ajustanto el HEIGHT (alto) del div */
/* EL !IMPORTANT ES PARA QUE OMITA TODA SENTENCIA PREVIA QUE POSÍA DE ESOS CÓDIGOS, EN ESTE CASO WIDTH Y OVERFLOW */
}
Saludos