Maquetación css a tres columnas

por | Feb 12, 2009 | CSS, Diseño | 2 Comentarios

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="wrapper">
    <div id="header">    
    </div>
    <div id="main">
        <div id="column1">
        </div>
        <div id="column2">
        </div>
        <div id="column3">
        </div>
    </div>
    <div id="footer">
    </div>
</div>

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

Otros post sobre maquetación CSS

2 Comentarios

  1. Martin Gorgojo
    Martin Gorgojo el abril 22, 2015 a las 2:11 pm

    Hola me gustarla hacer una web con el código puesto en esta pagina colocando los menús en el bloque izquierdo y quisiera que al cargar alguna pagina ocupara toda la zona de los bloques central y derecho ¿es posible? y si es posible ¿de que forma?
    Gracias por adelantado.

  2. Martin
    Martin el mayo 31, 2015 a las 2:30 am

    Hola Miguel aunque veo que los post son un poco antiguos los temas siguen estando de actualidad y por ello quisiera consultarte lo siguiente: yo quiero hacer una web con tres columnas digamos del 20, 60 y 20 %, en las laterales poner menús y en la central el contenido y mi pregunta es ¿ de que forma hay que configurarlo para que al seleccionar cualquier opción de los menús la barra derecha desaparezca y el contenido pase a ocupar el 80% y la barra izquierda el resto? De momento con las pruebas que he hecho se carga todo en el centro y la barra derecha no desaparece.
    Y aunque no se si es un poco tarde para consultas te doy las gracias por adelantado.