Hola:
Veo que no dominas muybien el tema de los DIV. Los div son elementos que ocupan todo el ancho de la pagina. No puedes poner uno al lado de otro si no haces que floten (propiedad float).
Te recomendaria que, mientras estes creando la estructura, pongas bordes y alturas (estas al menos hasta que tengas contenido en los div's. Ya tendrás tiempo de quitar esas "guias" cuando domines un poco más el tema :)
Te he puesto bordes en los divs para guiarte (primera regla del CSS) y te he reorganizado los divs en el codigo HTML.
Yo he hecho que flote todo a la izquierda. Hay otras soluciones dependiendo de la dirección en la que los hagas flotar.
Espero que te sirva.
Código CSS:
Ver original/* Esto lo pongo para que te guies */
div { border: 1px solid black; }
#envoltorio{
font-family:Tahoma, Geneva, sans-serif;
font-size: 1.0em;
background-image:url(images/background1.jpg);
margin:0 auto;
padding:0;
width:1202px; /* he tocado esta medida para que quepan los bordes */
height:auto;
overflow: hidden;
}
#lateralizq {
background:url(images/index_01.jpg);
width:59px;
height:900px;
float: left;
}
#centro{
float:left;
}
#superiorgeneral {
background:url(images/index_02.jpg);
width:1076px;
height:290px;
}
#superiorflotantemenu {
width:1076px;
height:90px;
}
#main {
background:url(images/index_04.jpg);
width:1076px;
height:auto;
}
#pie {
background:url(images/index_06.jpg);
width:1076px;
height:147px;
}
#lateralder {
background:url(images/index_03.jpg);
width:59px;
height:900px;
float: left;
}
#fondoabajo {
background-color:#f2886e;
width:1202px;
height:200px;
}
Código HTML:
<div id="envoltorio">
<div id="lateralizq"></div>
<div id="centro">
<div id="superiorgeneral"></div>
<div id="superiorflotantemenu"></div>
<div id="main"></div>
<div id="pie"></div>
</div>
<div id="lateralder"></div>
</div>
<div id="fondoabajo">fondo abajo</div> Al primer DIV le he llamado 'envoltorio' en vez de 'body' por que a mi no me gusta usar palabras del HTML para nombrar Id's o clases. Es una chorrada, lo se, pero para gustos, colores :)