layout 3 columnas + interior

DMH1983 · #1 (**permalink**) 06/10/2011, 17:04

bien soy bastante novato en estos temas.. la cosa es que intento hacer una pagina dividida en 4 un contenedor 2 divs laterales que harian de margen que contienen otro interior de 1px con un degradado .. y despues tengo el div del medio donde meteria la cabecera, menu, contenido y pie..

he intentado mil cosas.. peró siempre tengo problemas.. sobre todo que los laterales no crezcan con el del medio..

esto es lo último que he intentado..

Código:

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

	<body>

		<div id="contenedor">

			<div id="lateralizq">
				<div style="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 */">
				</div>
			</div>



			<div id="contenido">

				Hola<br><br><br><br><br>Hola<br><br><br><br><br>
			</div>
			<div id="lateralder">
			</div>
		</div>
	</body>

</html>

y el css

Código:

 #contenedor { width:100%; height: auto; margin:auto; padding:0;  display: table;}
 	
 	#lateralizq { display:table-cell; width:10%;height:100%;}
 
 	
 	#lateralder {  display:table-cell; background-color:yellow;width:10%;height:100%; }
 	
 	#contenido { display:table-cell;  width:80%; background-color:red; }
 	
 	#degraizq { display:table-cell; height:100%;width:10px;float:right; 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 */
					}

perdon si hay errores .. són simples pruebas.. alguien me puede decir como cojones se maqueta una página en condiciones? muchas gracias de antemano..