problema con posiciones css

[nolimitses]

Tengo cierto problemilla con las posiciones resulta que teng o un div con id contenido y otro con id lateral que esta n e nglobados en un id cuerpo.

La intencion de la web es q ue s ea liquida, el problema que al redimensionar la we b l a c apa con id contenido se come la capa con id latera l.
A part e es conseguir que sea toda la web liquida y uno de los pr oblemas es que me crea un espacio a la izquierda del id contenido.

Os dejo la direccion de la web http://www.newbalearen.com/~toni/
Alguna solucion.

CSS

html,body{
margin: 0;
padding: 0;
background-color: white;
font-family: "Verdana";
font-size: 0.75em;
line-height: 14px;
overflow: auto;
width: 100%;
} color: #ffcc00;

#contenedor {
width: 100%;
}
#cabecera{
width: 100%;
height: 158px;
background: url(../img/background.gif) repeat-x ;
}
#cabecera .left{
position: absolute;
top: 0;
left: 0;
width: 566px;
height: 125px;
/*float: left;*/
background: url(../img/left.png) no-repeat left;
}
#cabecera .right{
background: url(../img/right.png) no-repeat right ;
width: 500px;
height: 125px;
position: absolute;
top: 0;
right: 0;
}
#banner {
width: 100%;
height: 150px;
background: url(../img/banner_fondo.jpg) repeat-x bottom;
}
#cuerpo {
position: absolute;
top: 0;
left: 0;
width: 100%;
/*display: none;*/
}
/*lateral*/

#lateral{
position:absolute;
top: 180px;
left:10px;
color: white;
/*width: 20%;*/
/*display: none;*/
/*float: left;*/
}
#lateral .top {
background: url(../img/top_lateral.png) no-repeat ;
width: 190px;
height: 19px;
position: relative;
top:0;
}
#lateral .bottom {
background: url(../img/bottom_lateral.png) no-repeat ;
width: 190px;
height: 19px;
position: relative;
bottom:0;
}

/*Contenido*/

#contenido {
position:absolute;
top:320px;
right: 0;
margin-left: 200px;
background: olive;
min-height: 100%;
width: 80%;
}
#recomendaciones {
padding: 10px;
}
#recomendaciones #recomendacion {
background: black;
height: 200px;
width: 50%;
float: left;
}
#recomendaciones #superoferta {
width: 48%;
height: 480px;
background: aqua;
float: right;
}
#buscador{
height: 100px;
background: lime;
}
#footer{
height: 33px;
background: url(../img/menu.gif) repeat-x black;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 100%;
}

[Mikmoro]

Pues esto se debe a que estás poniendo todo en posiciones absolutas, y mientras al lateral le marcas la distancia desde la izquierda (left: 10px;), al contenido se lo marcas desde la derecha (right: 0px;).

Entonces es lógico que te ocurra esto: cuando reduces la ventana, el lateral se queda quieto porque sigue a la misma distancia de la izquierda, y el contenido se deplaza, porque la parte derecha, que es desde la que marca la distancia, se desplaza. Y se monta porque todo tiene posición absoluta, lo que permite que las cajas se monten unas encima de otras.

Mikel.

[nolimitses]

Entonces que solución ves. Es que la verdad me estoy rompiendo la cabeza y no veo las cosas claras.

Un saludo y gracias por todo

[Mikmoro]

No es la mejor solución ni mucho menos, porque no me parece buena práctica usar tantas posiciones absolutas, pero bueno, cmo estamos para buscar soluciones a un problema concreto, lo que puedes hacer es quitarle el right: 0; y el margin-left: 200px; y ponerle left: 200px; a tu selector "contenido".

Si has entendido la explicación, se trata de que ambas cajas tengas marcada la distancia desde un mismo sitio, en este caso la izquierda.

Mikel.