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