Bases de la Maquetacion con CSS

Hablando con un compaero del trabajo que me pregunto como usar capas para un determinado
diseo, se me ocurri escribir sobre unas cuantas propiedades de CSS que se usan habitualmente
en los diseos y que hay que tener bastante claras.

float: [left|right|none];

clear: [none|left|right|both];

Permite que el elemento afectado flote literalmente hacia

donde se le indique. Equivaldra al align=[left|right] de HTML pero, a diferencia de
este, afecta a cualquier elemento, no solo texto o imgenes.
Especifica si un elemento permite tener otros
elementos flotando a su alrededor. Si utilizas por ejemplo el clear: left; si encuentra
algn elemento flotando a su izquierda se situara justo debajo de el. Equivale al
de HTML.

Tras esto, vamos a hacer un pequeo ejercicio de prctica. La idea ser crear el clsico 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 continuacin.

Comenzamos con el cdigo 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 comn. Declaramos un contenedor y anidamos dentro cuatro capas, que harn
la funcin de header, men, contenido y footer. Despus, comenzaremos con los estilos uno a
uno, explicando para que es cada uno de ellos (Haremos el contenedor con unas mediadas
pequeas al principio por comodidad, luego si agrandas el contenedor al 100% todo se mover
en proporcin. 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 ponis 100% funcionara perfecto
height: 200px;
// Si ponis 100% funcionara perfecto
top: 10%;
// Le aadimos un posicionamiento por comodidad
left: 10%;
// Le aadimos 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
}// Men de la Izquierda
.contenedor .izquierda {
display: inline;
width: 20%;
height: 70%;
background-color: #2152DE;
float: left;
// float a la izquierda
}

cara al resto de estilos

// 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;
clear: both;

//

// float a la izquierda
el clear har que baje a donde est libre por ambos lados

A partir de aqu solo quedara ir llenando con ms elementos las capas que hemos creado. Es una
forma absolutamente dinmica de maquetar, puedes usar adems mrgenes a tu gusto para
separarlas, imgenes de fondo, lo que sea ya de cara a esttica. 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.
- See more at: http://blog.aplicacionesweb.cl/css/bases-de-la-maquetacion-concss/#sthash.Bi6W6uvs.dpuf

ul{list-style-type:none;}
Ejercicios a completar:
http://www.apuntesweb.net/diseno-web/galeria-imagenes-css-lightbox