Puede que te estés preguntando qué es eso de maquetar por "capas". Lo de capas es un síimil utilizado para intentar explicar la técnica utilizada. Imagina que tienes una pizarra completamente limpia y vacía. Eso sería el body de la página antes de escribir nada. Ahora tomamos una hoja transparente y en ella dibujamos un bloque que va a contener información y la ponemos sobre la pizarra. A continuación tomamos otra hoja transparente, le dibujamos otro bloque en otra posición (o no), y la depositamos encima de la anterior, y así sucesivamente hasta terminar la página. Eso es maquetar por capas. Cada una de las capas es completamente independiente de las otras, y pueden tener sus propios contenidos y estilo, aunque también pueden heredarlos (los estilos) según un modelo jerárquico, en el que el padre de todas las capas es body. En la figura siguiente tienes un ejemplo de maquetación.
Una de las maquetaciones más conocidas últimamente es la correspondiente a lo que se ha dado en llamar "blogs", "bitácoras", "diarios" o como quieras llamarles. Utilizaremos ese formato como ejemplo porque es muy simple: consta de una cabecera, dos columnas de contenidos y un pie:
Como puedes ver, hay una sombra debajo de la página. Esta sombra está producida por el siguiente gráfico.
Para conseguir que cubra todo el blog se le da una declaracióne de mosaico solamente en vertical: url(sombra.gif) repeat-y,
y se indica la posición en pantalla del eje central del gráfico: 50%. El bloque donde se hace todo esto es body. Así:
body {
background: #eee url(sombra.gif) repeat-y 50%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
Ya tenemos el fondo de nuestro blog. Ahora se define el primer bloque propio, es decir, no se trata de un elemento HTML. A este identificador le llamaremos "idioma" y nos servirá para montar una barra de navegación típica que en este caso utilizaremos para cambiar de lengua en el blog:
#idioma {
width: 622px;
margin: 0 auto;
background-color: #000;
border-bottom: 1px solid #FFF;
}
Fíjate en que a este bloque se le ha definido la anchura: 622px a fin de que coincida con el hueco en blanco que nos deja el gráfico de la sombra. Y puede que te estés preguntando por qué las declaraciones de color solamente tienen tres números. Es una forma de abreviatura admitida por CSS versión 2, es decir, que #000 es equivalente a #000000 Esto solamente se puede aplicar cuando los dos números son iguales en cada pareja.
A continuación definiremos la segunda parte de la cabecera con el bloque "cabecera". Simultáneamente se declara el estilo del texto que llevará dentro: "Titulo del blog" asignado a la etiqueta h1 que sí es un elemento HTML:
h1#cabecera {
width: 622px;
height: 90px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 200%;
background: url(cabecera.gif);
border-bottom: 5px solid #222222;
line-height: 90px;
font-weight: normal;
letter-spacing: 3px;
margin: 0px auto;
margin-bottom: 15px;
text-align: center;
}
Como puedes ver, se le ha dado la misma anchura que al bloque "idioma", pero tiene también definida la altura:
Este es el gráfico del fondo: 
A este bloque se le ha definido la altura simplemente para mantener la estética del diseño y porque se supone que nunca va a recibir otros contenidos, cosa que sí puede ocurrirle a la barra de idiomas.
El siguiente es un bloque curioso, ya que no va tener en su interior contenidos "normales", sino que su función es, como su nombre indica, servir de "contenedor" a otros bloques que sí portarán información. Por razones de estética es ligeramente más estrecho que los dos anteriores, y tampoco tiene definida la altura, ya que no sabemos cuanto ocuparán los contenidos:
#contenedor {
margin: 0 auto;
width: 600px;
}
Una vez definido el contenedor, procedemos a crear los dos bloques principales: el bloque izquierdo bloq_izq y el derecho bloq_der.
#bloq_izq {
float: left;
width: 400px;
text-align: justify;
}
#bloq_der {
float: right;
color: #999;
width: 170px;
}
Como puedes ver, solamente se define su anchura, a fin de mantener el diseño estable. Al no definir la longitud, ésta será establecida por los contenidos, es decir, que se "estirarán" lo que sea necesario. Tenemos también una instrucción nueva: float que es la que indica la posición de cada bloque dentro del contenedor. Esta instrucción es vital para este tipo de diseños, ya que sin ella el bloque derecho aparecería debajo del izquierdo, y no al lado como queremos, y además los dos bloques irían a parar debajo del "contenedor", en lugar de ir dentro de él.
Ahora solamente nos queda definir el bloque del pie:
#pie {
margin: 0 auto;
padding: 10px 0 10px 0;
color: #fff;
background: #333 url(pie.gif);
width: 622px;
clear: both;
text-align: center;
}
También tiene una instrucción nueva: clear, que sirve para cerrar el float de los dos bloques del contenedor. Sin ella el pie se superpondría a los dos bloques anteriores, en lugar de ir debajo del contenedor. clear tiene un parámetro: both (ambos) ya que tenemos dos float definidos, uno a cada lado. En el caso de que solamente hubiese uno, se indicaría sólo el que exista; left o right.
Para terminar la hoja de estilos ya solamente falta definir los estilos del contenido de cada bloque.
Aquí puedes ver la hoja CSS terminada, aquí el código XHTML del blog y aquí el blog listo para funcionar.