Bases de la Maquetacion con CSS

Hablando con un compañero del trabajo que me pregunto como usar capas para un determinado diseño, se me ocurrió escribir sobre unas cuantas propiedades de CSS que se usan habitualmente en los diseños y que hay que tener bastante claras.

• float: [left|right|none]; Permite que el elemento afectado flote literalmente hacia donde se le indique. Equivaldría al align=[left|right] de HTML pero, a diferencia de este, afecta a cualquier elemento, no solo texto o imágenes.
• clear: [none|left|right|both]; Especifica si un elemento permite tener otros elementos flotando a su alrededor. Si utilizas por ejemplo el clear: left; si encuentra algún elemento flotando a su izquierda se situara justo debajo de el. Equivale al
de HTML.

Tras esto, vamos a hacer un pequeño ejercicio de práctica. La idea será crear el clásico esquema de header, menú izquierdo, contenido y footer a base de XHTML y CSS. El resultado será el de la imagen que os pongo a continuación.



Comenzamos con el código XHTML de las capas.

"contenedor" class="contenedor">

"header" class="header">header

"izquierda" class="izquierda">izq

"contenido" class="contenido">contenido

"footer" class="footer">footer

Nada fuera de lo común. Declaramos un contenedor y anidamos dentro cuatro capas, que harán la función de header, menú, contenido y footer. Después, comenzaremos con los estilos uno a uno, explicando para que es cada uno de ellos (Haremos el contenedor con unas mediadas pequeñas al principio por comodidad, luego si agrandas el contenedor al 100% todo se moverá en proporción. Ventajas del CSS >:] ).

// Reiniciamos los Margenes para partir de cero
* {
margin: 0px;
padding: 0px;
}

// Declaramos el contenedor
.contenedor {
display: block;
position: absolute;
width: 450px; // Si ponéis 100% funcionara perfecto
height: 200px; // Si ponéis 100% funcionara perfecto
top: 10%; // Le añadimos un posicionamiento por comodidad
left: 10%; // Le añadimos un posicionamiento por comodidad
border: 2px solid #000000;
text-align: center;
vertical-align: middle;
}

// Aquí empiezan los estilos en cascada.
// Header o Cabecera
.contenedor .header {
display: inline;
width: 100%;
height: 20%;
background-color: #68DBFF;
float: left; // Hacemos que flote a la Izquierda de cara al resto de estilos
}

// Menú de la Izquierda
.contenedor .izquierda {
display: inline;
width: 20%;
height: 70%;
background-color: #2152DE;
float: left; // float a la izquierda
}

// Contenido Principal
.contenedor .contenido {
display: inline;
width: 80%;
height: 70%;
background-color: #9BB0EA;
float: left; // float a la izquierda para que se pegue a la anterior
}

// Footer o Pie
.contenedor .footer {
display: inline;
width: 100%;
height: 10%;
background-color: #72A3CC;
float: left; // float a la izquierda
clear: both; // el clear hará que baje a donde esté libre por ambos lados
}

A partir de aquí solo quedaría ir llenando con más elementos las capas que hemos creado. Es una forma absolutamente dinámica de maquetar, puedes usar además márgenes a tu gusto para separarlas, imágenes de fondo, lo que sea ya de cara a estética. Y al igual que este modelo, se pueden hacer mas jugando con los porcentajes para usar tres columnas en vez de dos. Eso ya queda a gusto del consumidor.