Maquetación CSS a tres columnas

Continuando nuestros talleres de CSS, vamos a ver ahora como hacer una estructura de tres columnas para una página web. Esta es una estructura bastante típica de portal. En una de las columnas se suele situar la barra de navegación, en otra el contenido y en la última una serie de banners con promociones.

Sería bueno ver el resultado que buscamos en una página aparte.

Este artículo va a presuponer que el lector comprende ya la maquetación con CSS y que ha leído el artículo Maquetación CSS a dos columnas. Nos basaremos en ese artículo para componer la página con CSS a tres columnas.

En líneas generales, la posibilidad que vamos a explorar a continuación para maquetar una web con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda flotando a la izquierda, la columna de la derecha flotando a la derecha y por último pondremos la parte principal, que aparecerá en el centro de la página.

El código HTML para hacer este ejemplo será el siguiente:

<div id="contenedor">
    <div id="cabecera">
       Cabecera 01
    </div>
    <div id="cuerpo">
       <div id="lateral">
          <ul>
             <li><a href="#">Enlace 1</a>
             <li><a href="#">Vínculo 2</a>
             <li><a href="#">Otro enlace</a>
             <li><a href="#">Link chulo</a>
             <li><a href="#">Más enlaces</a>
             <li><a href="#">Otro último</a>
          </ul>
       </div>
       <div id="otrolado">
          <img src="bannerlateral.gif" width="120" height="600" alt="">
       </div>
       <div id="principal">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
          ...
       </div>
    </div>
    <div id="pie">
       © 2005 DesarrolloWeb.com
    </div>
</div>

Vemos que la página contiene tres partes, la cabecera, el cuerpo y el pie. La cabecera y el pie se colocarán en el documento ocupando todo el ancho disponible. La parte donde colocaremos las tres columnas es el cuerpo.

Dentro del cuerpo, como podemos ver, tenemos tres capas. La capa "lateral", que es la que hemos pensado colocar a la izquierda. Luego está la capa "otrolado", que es la que planeamos colocar a la derecha. Por último está la capa "principal", que es la parte central. La capa "principal" aparecerá en el centro, porque a los dos lados estarán ocupados por las capas laterales.

El CSS que vamos a utilizar para maquetar esto será el siguiente. Se parece mucho al ejemplo de maquetación CSS a dos columnas. Luego lo comentaremos.

BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ebebeb;
}
#contenedor{
    text-align: left;
    width: 770px;
    margin: auto;
}
#cabecera{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
}
#cuerpo{
    margin: 10 0 10 0px;
}
#lateral{
    width: 160px;
    background-color: #999999;
    float:left;
}
#lateral ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
}
#lateral li{
    background-color: #ffffcc;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
}
#lateral a{
    color: #3333cc;
    text-decoration: none;
}
#otrolado{
    width: 120px;
    float: right;
}
#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    width: 460px;
}
#pie{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
}

Tendremos un contenedor, de 770 píxeles (px) de ancho, que es donde vamos a colocar todas las capas. Nos centramos en explicar la zona del cuerpo, que es donde aparecerán las tres columnas.

Vemos como la capa "lateral" tiene definido un ancho de 160 px, y un float: left; para que flote a la izquierda. Vemos luego como la capa "otrolado" tiene 120 px de ancho y flota a la derecha.

Luego vemos la capa "principal", que tiene un margen a la izquierda de 170 px, para dejar un espacio con respecto a la capa "lateral". 170 px porque la capa "lateral" ocupa 160 px de ancho, más 10 px que es lo que realmente estamos poniendo de margen. En la capa "principal" también hemos definido un ancho de 460 px, para que ocupe justo el espacio que queda en el centro.

Se puede ver el ejemplo en marcha en una página aparte.

Diseño fluido

Los diseños fluidos son los que se ajustan a la anchura que tengamos en la ventana del navegador. En el anterior ejemplo el diseño tenía una anchura fija de 700 píxeles y ahora vamos a hacer un par de modificaciones para que el diseño se ajuste a la ventana del navegador.

Simplemente tendremos que quitar la definición de anchura de la capa "contenedor".

#contenedor{
    text-align: left;
    margin: auto;
}

Luego, también quitaremos la definición de anchura de la capa "principal" y añadiremos el atributo margin-right: 130px; para que la capa con el contenido central tenga un margen con respecto a la capa que queda a la derecha. 130 px porque la capa de la derecha ocupaba 120 px, más 10 px que es realmente el margen que estamos dejando.

#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    margin-right: 130px;
}

Podemos ver el ejemplo en una página aparte.