Capas superpuesta

[frawol]

Hola a todos,

Soy nuevo en este mundillo del diseño con CSS y capas y ya me ha surgido el primer problema que no soy capáz de resolver.

Tengo una serie de capas anidadas dentro de una, que yo le llamo principal. Aqui tienen el código:

Código:

<div id="dv_principal">
<!-- Encabezado de la Pagina -->
	<div id="dv_enc">
		<div id="enc_logo01"><img src="../../temas/eganadera/imagenes/logo.jpg" alt="Logo Estella Ganadera" width="490" height="150" /> </div>
		<div id="enc_logo02"><img src="../../temas/eganadera/imagenes/logo2.jpg" alt="Logo Estella Ganadera" width="260" height="190" /> </div>
		<div id="enc_menu">
			<div id="enc_menu_01">Inicio &bull; B&uacute;squeda &bull; <a href="cxvxcvxcv">Registrarse</a> &bull; Mi Cuenta &bull; Contacto </div>
			<div id="enc_menu_02">Productos &bull; <a href="hola.html">Ofertas</a> &bull; Carrito &bull; </div>
		</div>
	</div>
<!-- Menu y contenido de la pagina -->
	<div id="dv_centro">
		<div id="centro_menu">
			<div id="lateral_1" class="lateral">
				<div class="lateral_enc">Productos</div>
				<div class="lateral_body">
				  DOG (ver)
				    <ul><li>Elemento 1</li>
			        <li>Elemento 2</li>
				    <li>Elemento 3</li>
				  </ul>
			    </div>
			</div>
	  </div>
		<div id="centro_contenido">
		sdfsdf		</div>
	</div>
</div>

El problema es que a partir de lo que viene desde:

<!-- Menu y contenido de la pagina -->

se queda fuera de la capa principal, ya que esta no se hace más grande automáticamente.

pueden ver el código fuente del CSS aquí:

Código:

/******************************************************
* Etiquetas predeterminadas de (X)HTML
******************************************************/
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; margin: 5px; background-color: #8C96C7; }
a {	color: #FFFFFF; }

/******************************************************
* Estructura principal de la web
******************************************************/
/* Capa principal */
#dv_principal { position:relative; text-align: center; vertical-align: top;	width: 750px; background-color: #FFFFFF; border: 1px solid #000000; padding: 6px; }

/* Capa del encabezado junto a sus subcapas */
#dv_enc { position:relative; width:750px; height:190px; margin: 0px; padding: 0px; }
#enc_logo01 { position:absolute; left:0px; top:0px; width:490px; height:150px; z-index:1; }
#enc_logo02 { position:absolute; left:490px; top:0px; width:260px; height:190px; z-index:2; }
#enc_menu { position:absolute; left:0px; top:150px; width:490px; height:40px; z-index:3; background-color: #323B5C; text-align: center; vertical-align: middle; }
#enc_menu_01 { position:absolute; left:2px; top:2px; width:486px; height:18px; z-index:1; padding-top: 2px; clip: rect(auto,auto,18px,auto); color: #FFFFFF; }
#enc_menu_02 { position:absolute; left:2px; top:20px; width:486px; height:18px; z-index:1; background-color: #CDD1EA; padding-top: 2px; clip: rect(auto,auto,18px,auto); 				color: #000000;}
#enc_menu_02 a { color: #000000; text-decoration: none; }
#enc_menu_02 a:hover { color: #CDD1EA; text-decoration: none; background-color: #323B5C; }
#enc_menu_01 a { color: #FFFFFF; text-decoration: none; }
#enc_menu_01 a:hover { color: #323B5C; text-decoration: none; background-color: #FFFFFF; }

/* Centro de la pagina */
#dv_centro {
	margin-top: 15px;
	margin-bottom: 15px;
	position: relative;
	text-align: left;
	vertical-align: top;
	width:750px;
	padding: 0px;
}
#centro_menu { left: 0px; top: 0px; position: absolute; width: 175px; }
#centro_contenido {	position: absolute; left: 182px; top: 0px; width: 580px; }

/* Laterales */
.lateral {
	background-color: #323B5C;
	padding: 2px;
	width: 100%;
	position: relative;
	margin-bottom: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: left;
	vertical-align: top;
}
.lateral_enc {
	background-image: url(../imagenes/flecha1.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 12px;
	position: relative;
	padding-bottom: 2px;
	text-transform: uppercase;
}
.lateral_body {
	font-weight: normal;
	color: #000000;
	position: relative;
	background-color: #CDD1EA;
	padding: 2px;
}
.lateral_body li {
	margin: 0px;
	padding: 0px;
}
.lateral_body ul {
	margin: 0px;
	padding: 0px;
	list-style-position: inside;
	list-style-image: url(../imagenes/flecha-lista.gif);
}

Me gustaría, a parte de que si pueden ayudarme con mi problema, me corrigieran el código si hay algo mal o puede hacerse de otra forma más sencilla.

PD: ahora mismo no tengo ningun sitio donde subir página. Hubiera sido lo más cómodo para todos.

Us saludo a to2 y gracias por escucharme.

[MikiBroki]

No ando del todo fresco aún con CSS pero pon "overflow:auto" a todos los DIV.

Ten en cuenta de que en caso de que le definas un alto le aparecerá la barra de scroll.

Quizás este hilo te sea de ayuda:

http://www.forosdelweb.com/f53/div-que-alargue-alto-segun-otro-div-que-contiene-461796/

Salu2