Barras laterales degradadas

[jhz1983]

buenas tengo unos problemas para crear unas barras laterales degradadas..
tengo 3 divs con posicion absoulta 10% 80% 10% en los divs laterales he creado unos divs dentro con un degradado del colorzilla. este es el css (sin el degradado):

Código:

#barrader{
	width:10px;
	height:100%;
float: right;
}

aqui veis como queda:



como veis la barra lateral de la derecha se posiciona bien pero no se alarga con el contenido y la barra izq directamente no se posiciona bien.
sorprendentemente la barra derecha si que se alarga con el contenido y tiene el mismo codigo ..

[jhz1983]

bueno os pego el codigo completo css:

Código:

#lateralizq {
	width:10%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;		
	}
#contenedor {
	width: 80%;
	height:100%;
	position:absolute;
	top:0;
	left:10%;
	border:1px solid black;
	
	}
#lateralder {
	width: 10%;
	height:100%;
	position:absolute;
	top:0;
	right: 0;
	
	}
#barraizq
	{
	float:right;
	width:10px;
	height:100%;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.33) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.33)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* W3C */
	}

#barrader {
	float:left;
	width:10px;
	height:100%;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0.33) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(50%,rgba(255,255,255,0.33)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.33) 50%,rgba(255,255,255,0) 100%); /* W3C */
	}
#nav	{
	width:100px;
	height:100%;
	float:left;
	border: 1px solid black;
	}
#cabecera {
	width:100%;
	height:125px;
	background-color: black;
	}
#contenido {
	width:100%
	height:100%;
		}

el div nav se sale por debajo del contenedor y los divs que contienen las barras laterales degradadas no se adaptan si la pagina crece