[SOLUCIONADO] Lio en esto de capas, como hago esto

[CrepitantE]

Saludos a todos.
Tengo pocos conocimientos en el manejo de css.

Estoy haciendo una página mostrada en la imagen.




Donde el width es la anchura de la pantalla, el cuadrado blando es una capa que contiene a las de abajo.
La idea es que se amplie con base con base en el tamaño de las amarillas o de las rojas
Que me recomiendan para colocar las capas rojas una debajo de otra sin especificar tamaño absoluto a cada una, es decir solamente con un <div id="caparoja"></div> y se coloque debajo de esta (de las rojas).

Gracias por sus respuestas.

[pitufoweb]

Hola,

puedes hacer dos columnas; una columna para la capa amarilla y otra columna para capa roja.

Ejemplo:

Código HTML:

<div class="blanco">
	<div class="col-iz">
		<div class="capa-amarilla">
		</div>
	</div>
	
	<div class="col-der">
		<div class="capa-roja">
		</div>
		<div class="capa-roja">
		</div>
		<div class="capa-roja">
		</div>
	</div>
</div> 

Saludos

[pzin]

Si van a tener alturas fijas bastaría con que se flotaran, ya que entonces se pondrán así como quieres.

Código CSS:

div#central,
div.lateral {
  float: left;
}
 
div#central {
  width: 60%;
}
 
div.lateral {
  width: 40%;
}
 

Código HTML:

<div id="central"></div>
<div class="lateral"></div>
<div class="lateral"></div>
<div class="lateral"></div>
 

Para cualquier otra cosa dividirlo en columnas como indica pitufoweb es seguramente una estrutura más robusta.

[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:

[CrepitantE]

Ya tengo la solución, muchísimas gracias por su atención:
Lo he logrado unos pocos minutos despues de publicar, lo compoarto con todos.
Dentro de la capa blanca el lado izquierdo se le da float left, la capa derecha float right.
y hay que crear una capa de "cierre" que contenga el código clear: both; y automáticamente cuadra el texto.

Código:

<div class="blanco">
	<div class="col-iz">
		<div class="capa-amarilla">
		</div>
	</div>
	
	<div class="col-der">
		<div class="capa-roja">
		</div>
		<div class="capa-roja">
		</div>
		<div class="capa-roja">
		</div>
	</div>
<div class="cierre"></div>
</div>

[pzin]

Entonces tu problema no era estructurar esos elementos sino el limpiar los flotados para que la capa contenedora creciera.

Hay dos soluciones más limpias que esa, sin añadir elementos al HTML.

Una sería añadir overflow a la capa contenedora:

Código CSS:

div.blanco {
  overflow: hidden;
}
 

Y la otra es, hacer eso mismo pero usando un pseudo-elemento:

Código CSS:

div.blanco::after {
  visibility: hidden;
  display: block;
  clear: both;
  height: 0;
  content: ' ';
  font-size: 0;
}