Mucha teoría en el post anterior así que mejor vamos a algo más concreto.
Para maquetar a dos columnas debemos hacer que dos divs floten, uno a la izquierda y otro a la derecha, hasta ahi suena muy simple pero debido a ciertos problemas en IE6 y otras peculiaridades, debemos agregar algo más de código, primero publicaré el código y luego lo destriparé línea por línea
[cc lang=»html»]
[/cc]
En cuanto al código html no hay nada espectacular tengo un div Wrapper que contiene toda la página web, debajo del Header tengo un div Main que me va a servir para contener a ambas columnas y debajo de estas un br este es util para que el div contenedor crezca en función de los divs que flotan. ¿Por qué el clear:both? Esta propiedad permite que desaparezca lo que flota, es como una pequeña traba a los divs que están flotando.
Estilos CSS de las columnas
Bueno, vamos con el css
[cc lang=»css»]
#wrapper {
width:800px;
height:auto;
margin:auto;
}
#header {
height:120px;
background-color:#FFCC33;
}
#main {
width:800px;
overflow:hidden;
height:auto;
}
#column_left {
width:200px;
background-color:#5B7444;
height:300px;
float:left;
}
#column_right {
width:590px;
background-color:#47697E;
height:300px;
float:right;
}
#footer {
height:100px;
background-color:#688B9A;
}
[/cc]
Al wrapper le he dado un height auto porque no deseo que tenga un tamaño fijo sino que crezca en función de los divs que contiene, además tiene un margin:auto para que este centrado.
Al header no le he dado width porque los divs son como los gases, automaticamente toman el tamaño del div que los contiene
Al main en cambio si le he dado un width eso es porque los divs que contienen a otros flotantes para que crezcan deben tener un overflow:hidden ademas deben tener un width definido ya sea un valor fijo en pixeles o un porcentaje.
En el footer no hay nada que comentar.
