Hola para esto lo que yo haria seria establecer un bloque contenedor para las cajas "menulateral" y "cuerpo" y ponerle un minimo de anchura del tamaño de la anchura de las cajas que contendra para que asi al manipular la ventana el bloque contenedor no permita que se modifique el tamaño de lo que contiene en su interior.
aqui esta desarrollado.
HTML:
Cita: <html>
<head>
<link href="for2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<p> rock </p>
</div>
<div id="contenedorcuerpo">
<div id="menulateral">
<ul id="lista">
<li> <a href="#">Inicio</a></li>
<li> <a href="#">Bandas</a></li>
<li> <a href="#">Contacto</a></li>
</ul>
</div>
<div id="cuerpo">
<p>Aca va la informacion</p>
</div>
</div>
<div id="pie">
</div>
</div>
</body>
</html>
CSS:
Cita: body{
background-image:url(imgfondo2.jpg);
background-repeat:repeat;
text-align:center;
}
#cabecera, #cuerpo{
color: green;
text-align: center;
}
#pie{
clear:both;
}
#contenedor {
overflow:hidden;
}
#contenedorcuerpo{
width:100%;
min-width:800px;
}
#menulateral {
Width: 150px;
float: left;
}
#cuerpo{
width: 550px;
float: left;
}
#cabecera{
font-size: 3.5em;
}
#menulateral li {
list-style: none;
}
#menulateral li a {
background-image:url(imgfondo2.jpg);
background-repeat:repeat;
display: block;
text-decoration: none;
color: green;
margin: 1em;
}
#menulateral, #cabecera, #cuerpo {
background-image:url(imgfondo.jpg);
background-repeat:repeat;
border-width: 0.1em;
border-color: black;
border-style: solid;
}
Esto es "lo que yo haria" y lo probe y funciona, espero te sirva, slds !