Un DIV rebelde

[Rankxerox1984]

Hola a todos/todas:

Estoy definiendo el estilo de mi site con mis rudimentarios conocimientos de CSS. Me estoy basando en DIV's y float para organizar el Layout.
En la parte de HTML tengo definidos los DIV unos dentro de otros, quiero decir que cada DIV tiene su correspondiente cierre encapsulando los que contiene. Dentro de estos DIV hay otros que fluyen (deberian fluir) mediante la propiedad FLoat:left en CSS pero no sucede asi para uno en particular. Y explico mi problema.
El DIV "CentroPagina" Contiene "Panel_Principal" y "Caja_Tabla" y los dos tienen asignados Float:left (incluso Caja_tabla tiene Clear:both) pero "Caja_Tabla" se superpone a "Panel_Principal".
Llevo todas la tarde dándole vueltas pero no veo el fallo (que seguro que existe) ¿alguien lo ve?

El HTML:

Código HTML:

 <div id="CentroPagina">
  
		<div id="Panel_principal"><p></div>

		<!--Aquí va mapa funcional primario-->	

		<div id="caja_tabla">

			<div id="Encabezado">
			<p></p></div >
			
			<div id="Caja1">
			<p></p></div >
			
			<div id="Caja2">
			<p></p></div >
			
			<div id="Caja3">
			<p></p></div >
			
			<div id="Caja4">
			<p></p></div >
			
		</div>
	</div> 

y el CSS:

Código HTML:

/*Centro página*/

	#CentroPagina {position:absolute;top:115px; left:12.5em; width:43.5em; margin:0.1em;text-align: Left;}
	
		/*panel principal*/ 

		#Panel_principal {float: left; width:43.5em; margin:0.1em;text-align: Left;}
		
		/*Registro*/

		#Regform{float: left;padding: 3px 10px 10px 10px;border-radius:7px;-moz-border-radius: 7px;-webkit-border-radius:7px;height:auto;width:40em;margin:0.1em;}

		/*Mapa Funcional*/

		#caja_tabla {clear:both;float:left;clear:both;width: 35em; margin:0.1em;}
			#Encabezado {background:#778899;position:absolute;top: 1px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width: 34.9em;height:3.70em;margin:0.1em;text-align: Center;font-size:18;font-weight: bold;line-height: center;}
			#Caja1 {background:#778899;position:absolute;top: 59px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width: 34.9em;height:3.2em;margin:0.1em;text-align: Center;font-size:18;font-weight: bold;line-height: center;}
			#Caja2{background:#778899;position:absolute;top: 109px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:34.9em;height:3.2em;margin:0.1em;text-align: Center;font-weight: bold;line-height: center;}
			#Caja3{background:#778899;position:absolute;top: 159px; left: 0px;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width: 11.5em;height:3.2em;margin:0.1em;text-align: Center;font-weight: bold;line-height: center;}
			#Caja4{background:#778899;position:absolute;top: 159px; left: 11.7em;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius:4px;width:11.5em;height:3.2em;margin:0.1em;text-align: Center;font-weight: bold;line-height: center;}

Gracias por la paciencia, la ayuda y el apoyo sicológico ,

[C2am]

Lo que pasa es que le estas diciendo a #Encabezado que se ubique a 1px del borde superior y eso hace exactamente, y así sucesivamente a las demás.
Recuerda las posiciones absolutas se ubicarán de acuerdo a la caja contenedora que tengan de referencia. En este caso "CentroPagina" que es la caja que la contiene que tiene definida la posición, en este caso absoluta. Si no hubiera cajas superiores que tengan definido el position entonces se ubica de acuerdo a la pantalla, con el vertice superior izquierdo como el 0 0.

Material de lectura:
http://www.librosweb.es/css/capitulo5.html

[ArturoGallegos]

<div id="Panel_principal"><p></div>

?¿ y el cierre de ese párrafo?

[Rankxerox1984]

Hola a los dos:

Buenos dias. acabo de leer vuestros consejos y me ha funcionado.

Doy el tema por zanjado,