DIV líquido con sombra

[mlombardo70]

Buenas,

La idea es hacer una columna con sombras a los laterales, y esta columna debe crecer a lo ancho en función de la resolución, es decir, que sea líquida. Y al mismo tiempo que crezca totalmente de forma vertical (hasta la parte inferior siempre)

Adjunto captura:
[URL=http://img580.imageshack.us/img580/9448/dibujokww.jpg][IMG]http://img580.imageshack.us/img580/9448/dibujokww.th.jpg[/IMG][/URL]

El problema que hay (que quizá no se aprecie bien porque los degradados son muy pequeños) es que los degradados no crecen verticalmente hasta el final de la página

Este es el código

HTML

Código HTML:

<div id="wrap">
    <div id="izq"></div>
    <div id="drc"></div>
    <div id="cnt"><p>Texto de prueba</p> </div>
</div>
 

CSS

Código CSS:

#wrap {
width: 90%;
min-height: 100%;
margin:0px auto;
height:100%;
}
 
#izq{
float: left;
width: 5px;
height: 100%;
background: url("./shadow-l.png") repeat-y scroll left top transparent;
}
 
#drc{
float: right;
width: 5px;
height: 100%;
background: url("./shadow-r.png") repeat-y scroll right top transparent;
}
 
#cnt{
padding: 20px;
overflow: hidden;
background: none repeat scroll 0pt 0pt rgb(204, 204, 204);
}
 

¿Sabéis alguna manera de solucionar esto?

Muchas gracias