Lio en esto de capas, como hago esto

[CrepitantE]

Gracias a ambos por contestar pitufoweb y Bonez, tengo exactamente el mismo código que sugieres pitufoweb He tratado de multiples formas incluido el código que mencionas Bonez, el problema es que a veces solo coloca el primer cuadro rojo, se sale el problema es que si es posicion absolute(con la misma clase), queda una capa detras de la otra. Position relative queda diferente, float right, coloca primero una y despues otra pero no debajo.

El ejemplo lo he tomado de esta web ilustra el esquema:

http://www.desarrolloweb.com/articul...ecera-pie.html

Código:

<style type="text/css">
BODY {
	font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10 0 10 0px;
	text-align: center;
	background-color: #ebebeb;
}
#contenedor{
	text-align: left;
	width: 770px;
	margin: auto;
} 
#cabecera{
	background-color: #d0d0ff;
	color: #333300;
	font-size:12pt;
	font-weight: bold;
	padding: 3 3 3 10px;
}
#cuerpo{
	margin: 10 0 10 0px;
}
#lateral{
	width: 160px;
	background-color: #999999;
	float:left;
}
#lateral ul{
	margin : 0 0 0 0px;
	padding: 0 0 0 0px; 
	list-style: none; 
}
#lateral li{
	background-color: #ffffcc;
	margin: 2 2 2 2px;
	padding: 2 2 2 2px;
	font-weight: bold;
}
#lateral a{
	color: #3333cc;
	text-decoration: none;
}
#principal{
	margin-left: 170px;
	background-color: #ffffff;
	padding: 4 4 4 4px;
}
#pie{
	background-color: #cccccc;
	padding: 3 10 3 10px;
	text-align:right;
}
</style>

Código:

<div id="contenedor">

	<div id="cabecera">
		Cabecera 01
	</div>
	<div id="cuerpo">
		<div id="lateral">
			<ul>
				<li><a href="#">Enlace 1</a>
				<li><a href="#">Vínculo 2</a>
				<li><a href="#">Otro enlace</a>
				<li><a href="#">Link chulo</a>
				<li><a href="#">Más enlaces</a>
				<li><a href="#">Otro último</a>
			</ul>
		</div>
		<div id="principal">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa cursus ullamcorper. Donec quis justo. Pellentesque fermentum. Etiam pharetra, ipsum eget faucibus malesuada, ante elit tristique nibh, ut commodo sem dolor aliquam ante. Aliquam ut leo rhoncus arcu dictum sodales. Morbi viverra, dui vel mollis iaculis, urna libero tincidunt leo, nec interdum ligula lacus congue lacus. Nam porttitor, nibh quis scelerisque lobortis, neque diam consectetuer magna, sit amet mattis diam quam vitae erat. Donec wisi tortor, lacinia et, blandit nec, semper nec, urna. Aliquam erat volutpat. 
			<p>
			Aliquam erat volutpat. Sed ac augue non libero commodo lacinia. Morbi molestie augue at felis. Mauris ornare, est ac imperdiet vehicula, tortor dui sagittis lacus, sed tempor lorem tellus ut turpis. Donec dui est, rhoncus sit amet, bibendum sed, rutrum sit amet, ligula. Suspendisse ac sapien ac mi posuere rutrum. Vivamus sollicitudin, mi eu vehicula convallis, sem magna blandit purus, id pellentesque augue dui vitae urna. Nam imperdiet. Curabitur libero. Suspendisse sodales sem in nunc. Proin diam augue, nonummy non, posuere in, lacinia eget, pede. Pellentesque felis sem, cursus mattis, commodo et, condimentum egestas, quam. Morbi lacinia. Praesent pulvinar elit vitae arcu. Integer sagittis metus ut justo. Etiam pharetra adipiscing nunc.
			<p>
			Etiam sodales nulla non neque. Duis porttitor faucibus leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ipsum nunc, sodales nec, faucibus quis, euismod at, arcu. Phasellus id odio. Aenean nibh mauris, venenatis eget, commodo id, gravida ut, arcu. Pellentesque dui metus, nonummy sit amet, aliquet sed, pretium sit amet, diam. Sed dapibus rhoncus sem. Integer blandit elit at mauris. Praesent vel nunc a massa lacinia pharetra. Etiam nibh arcu, rhoncus a, ultrices et, feugiat in, ipsum. Phasellus suscipit tincidunt urna.
			<p>
			Vivamus mattis eros euismod lectus. Suspendisse potenti. Vestibulum justo odio, ullamcorper a, semper in, eleifend non, turpis. Nunc urna pede, blandit vehicula, gravida at, luctus a, leo. Nulla facilisi. Etiam vitae elit ut nisl tempor pretium. Aliquam erat volutpat. Fusce molestie commodo wisi. Proin pretium libero in eros. Donec blandit. Mauris blandit, ligula non convallis laoreet, sapien nunc elementum metus, eu accumsan sapien est sollicitudin mauris. Aliquam vulputate. Nulla eget massa quis sapien pulvinar ornare. Integer suscipit magna eget orci. Sed rutrum adipiscing tortor. Donec aliquet dapibus neque. Aliquam sed arcu non est sollicitudin lobortis.
		</div>
	</div>
	<div id="pie">
	&copy; 2005 DesarrolloWeb.com
	</div>
</div>

Si yo tratase de copiar el código resaltado quedaría algo como esto: