como ajustar esto?

DMH1983 · #1 (**permalink**) 06/10/2011, 13:03

bien la verdad.. soy un desastre con la maquetación... estoy intentando hacer.. una maquetación básica de una página en 3 divs... 2 laterales con un degradado y el central donde iria todo el contenido.. la cosa está en que el lateral derecho se me corre a la izq y el degradado desaparece y queda en blanco.. quiero que el lateral derecho se quede fijo aunque haga la página más pequeña..

HTML

Código:

<html>
	<head>
	<link rel="stylesheet" href="nuevocss.css" type="text/css">
	</head>

	<body>

		<div id="contenedor">

			<div id="lateralizq">
			</div>

			<div id="lateralder">
			</div>

			<div id="contenido">

				<div id="nav">
				</div>

				<div id="material">
				</div>
			</div>
		</div>
	</body>

</html>

CSS

Código:

#contenedor { width:100%; height: auto; margin:auto; padding:0; background-color:black;}
 	
 	#lateralizq { width:10%; position:absolute; left:0;top:0; height:100%; background-color:green;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 */}
 	
 	#lateralder { width:10%; position:absolute; right:0; top:0; height:100%; background-color:red;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 */}
 	
 	#contenido { width:80%; min-width:800px; height:100%; background-color: blue;position: absolute; left:10%; top:0;}