Si se puede maquetar a dos columnas, también se puede a tres o más columnas con algunos cambios.
Código html de la maquetación
[cc lang=»html»]
[/cc]
La misma estructura del código anterior pero esta vez le agrego una columna, es posible agregar más columnas si quisieras hacer por ejemplo una lista de opciones o para galerias de imágenes.
Hoja de estilos para la maquetación
La hoja de estilos no ha variado mucho respecto a la del anterior tutorial
[cc lang=»css»]
#wrapper {
width:800px;
height:auto;
margin:auto;
}
#header {
height:120px;
background-color:#FFCC33;
}
#main {
width:800px;
overflow:hidden;
height:auto;
}
#column1 {
width:200px;
background-color:#5B7444;
height:300px;
float:left;
}
#column2 {
width:400px;
background-color:#47697E;
height:300px;
float:left;
}
#column3 {
width:200px;
background-color:#A3C586;
height:300px;
float:left;
}
#footer {
height:100px;
background-color:#FCF1D1;
}
[/cc]
La novedad es que las columnas 1,2,3 les he dado un float:left para que estén alineadas a la misma altura
