Maquetación css a tres columnas
Categories: CSS, Diseño - Tags: CSS, maquetaciónSi 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | #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; } |
La novedad es que las columnas 1,2,3 les he dado un float:left para que estén alineadas a la misma altura
