Problemas con posiciones en CSS

Tengo cierto problemilla con las posiciones resulta que tengo 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.

<code>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%;
}</code>