Una solución general que seguro que puedes adaptar. Utiliza una capa fija para los fondos que ocupa toda la pantalla.
<head><style type="text/css">
body{ /* aqui pueden ir fondos para los márgenes*/
margin:0;
}
#fondo-pagina{ /* Un fondo estático para el contenido de la página se incluye para */
/* permitir composiciones complicadas mediante divs, transparencias, etc.*/
background-color: #6600FF;
left: 20%;
height: 100%;
position: fixed;
top: 0;
width: 60%; /* dándole un 100% se pueden incluir aquí los márgenes en lugar de en body*/
min-width:450px; /* el ancho mínimo que quieras para que las columnas se muestren */
/* siempre una al lado de la otra y no desaparezca una de ellas */
}
#fondo-menu { /* aqui pueden ir fondos estáticos para el menu */
background-color:#C06;
left:10px; /* El margen izquierdo de fondo-menu */
width:200px;
bottom: 0px;
top:0;
height:auto;
position:absolute;
/* las cuatro propiedades anteriores garantizan */
/* que el fondo del menu ocupe toda la pantalla */
}
#wrap { /* coincide exactamente sobre la capa que contiene al fondo */
/* debe ser transparente */
min-height: 100%;
position: absolute;
left: 20%;
top: 0;
width: 60%;
background: none; /* Se debe ver el fondo, aunque admite transparencias */
}
#menu{ /* aquí pueden ir fondos para el menu que se muevan con la página*/
margin-left:10px; /* El margen izquierdo de fondo-menu */
margin-right:10px; /* separación del contenido */
background-color:#99C;
margin-bottom: 30px; /* alto del pie */
width:200px;
float:left;
}
#contenido{ /* aquí pueden ir fondos para el contenido que se mueven con la página */
margin-right:10px; /* separación del contenedor */
background-color:#99C;
margin-bottom: 30px; /* alto del pie */
float:left;
}
#pie{
position:absolute;
width:100%;
background-color: #555500;
bottom: 0;
height: 30px;
left: 0;
}
.clearfix{
clear:both;
height:0;
}
</style></head>
<body>
<div id="fondo-pagina">
<div id="fondo-menu"></div>
</div>
<div id="wrap">
<div id="menu">
<p>Algo de relleno<br>para que se muestre el div</p>
<p>¿Un menú <br />más alto <br/>que el <br/>contenido?</p>
<p>Sin problema</p>
</div>
<div id="contenido">
<p><br/>Algo de contenido<br/><br/></p>
<p>Más contenido</p>
</div>
<div class="clearfix"></div>
<div id="pie"></div>
</div>
</body>