DIV líquido con sombra

mlombardo70 · #1 (**permalink**) 16/12/2010, 17:36

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:

Ver original<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:

Ver original#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

opzina · #2 (**permalink**) 16/12/2010, 21:11

Edita y pon bien tu enlace a la imagen. A demás, puede poner una imagen mas grande.? gracia.s

mlombardo70 · #3 (**permalink**) 17/12/2010, 14:39

Que raro, en la vista previa del mensaje aparecía...

Vuelvo a copiar el código y estilos todo junto, listo para copiar, pegar, guardar como htm y abrir para verlo idéntico:

Código HTML:

<html>
<head>
	<title>Prueba de columnas con sombra</title>

<!-- CSS -->
<style type="text/css" id="vbulletin_css">

body{
	margin:0px
}

p{
	margin:0px;
	padding:0px;
}

#wrapper {
	width: 90%;
	margin: 0px auto;
	height: 100%;
}

#izq{
	background: url("http://img547.imageshack.us/img547/9636/shadowleft.png") repeat-y scroll 0 0 transparent;
	float: left;
	height: 100%;
	width: 20px;
}

#drc{
	background: url("http://img8.imageshack.us/img8/8906/shadowright.png") repeat-y scroll 0 0 transparent;
	float: right;
	height: 100%;
	width: 20px;
}

#cnt{
	background: none repeat scroll 0 0 #EEEEEE;
	height: 100%;
	overflow: hidden;
	padding: 40px;
}



</style>


</head>

<body>

<div id="wrapper">
	<div id="izq"></div>
	<div id="drc"></div>
	<div id="cnt"><p>Contenido</p></div>
</div>

</body>
</html>

Si abrís ese parece que está todo correcto, no?
el problema viene que cuando crece por el contenido (substituid el texto por uno lo suficientemente largo y lo veréis), que los degradados de los laterales no crecen más ([URL="http://img217.imageshack.us/img217/6021/capturael.jpg"]ver la imagen[/URL])

Conocéis alguna solución?

PD: lo he probado en Mozilla Firefox 3.6.13