Maquetación CSS a dos columnas

Vamos a ver cómo realizar una maquetación a dos columnas con CSS, sin utilizar tablas. Además de las dos columnas, para completar la estructura típica de una web, colocaremos una cabecera y un pie de página.

El ejemplo pretende ser el inicio de una serie de artículos para mostrar cómo realizar distintos tipos de plantillas, maquetando con CSS en lugar de tablas. Iremos publicando estos artículos en nuestro Taller de CSS.

Empezamos mostrando los dos ejemplos de maquetación que veremos en este artículo, siempre con dos columnas, dejando la columna con los enlaces de la barra de navegación a la izquierda o la derecha.

• Maquetación con dos columnas y enlaces a la izquierda
• Maquetación con dos columnas y enlaces a la derecha

El código HTML

El código HTML de los dos ejemplos que hemos adelantado es el mismo. Básicamente este:

<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="principal">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    ......
   </div>
  </div>
  <div id="pie">
  © 2005 DesarrolloWeb.com
  </div>
</div>

Se puede ver que tenemos una capa contenedor, que engloba todo el código. Luego, dentro del contenedor tenemos tres bloques. La cabecera, el cuerpo y el pie de página. La cabecera y el pie de página son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde tendremos las dos columnas es el cuerpo.

Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte, que hemos llamado "lateral", con una lista de enlaces (sería la barra de navegación) y otra parte con el texto de la página, que hemos llamado "principal".

El código CSS

Como habíamos adelantado, veremos dos variantes de codificación a dos columnas, con los enlaces a la izquierda y a la derecha. No obstante, la mayor parte del código CSS de ambos ejemplos es la misma, pues sólo varía la declaración de estilos de la capa "lateral" y de la capa "principal".

Maquetar con los enlaces a la izquierda

Veamos la codificación CSS para la página con los enlaces a la izquierda.

<style type="text/css">
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;
}
#principal{
   margin-left: 170px;
   background-color: #ffffff;
   padding: 4 4 4 4px;
}
#pie{
   background-color: #cccccc;
   padding: 3 10 3 10px;
   text-align:right;
}

La parte que vamos a remarcar es donde se define el estilo del lateral y la capa principal. El lateral hacemos que tenga un tamaño fijo de 160 pixel, pero lo más importante es que hacemos que "flote" a la izquierda con float:left;. Esto hace que el lateral se quede en la izquierda y permite que el contenido insertado después del lateral se coloque a la misma altura, pero a la derecha.

Por su parte, para la capa principal, simplemente se indica que tiene un margen a la izquierda de 170 píxeles. Esto hace que se coloque al lado de la capa lateral, dejando un espacio en blanco de 10 píxeles. Tiene un margen de 170, de los que 160 son para el espacio que va a ocupar la capa de los enlaces y 10 píxeles de espacio entre la capa principal y la lateral.

Como la capa principal no tiene definida su anchura, se hará tan grande como lo permita el contenedor.

Nota: Estas explicaciones no son completas de todo el ejercicio. Se supone que el lector ya tiene asimilados algunos conceptos que se han explicado en el Manual de CSS o en el Taller de CSS.

Podemos ver el ejemplo en marcha en una página aparte. Como es un archivo HTML, podemos ver el código fuente para ver cómo queda el conjunto de maquetación y declaración de estilos completo.

Maquetar con los enlaces a la derecha

Continuamos mostrando los cambios que habría que hacer para maquetar la página con la columna de enlaces a la derecha. Simplemente vamos a cambiar el código CSS de las capas lateral y principal.

#lateral{
   width: 160px;
   background-color: #999999;
   float:right;
}
#principal{
   background-color: #ffffff;
   padding: 4 4 4 4px;
   margin-right: 170px;
}

Ahora la capa lateral estamos indicando que flote a la derecha. Por su parte, en la capa principal hemos cambiado el margen que había antes hacia la izquierda para ponerlo en la parte de la derecha.

Podemos ver el ejemplo en una página aparte.

Diseño fluido

Hasta aquí en este artículo hemos visto cómo hacer un diseño con una anchura fija. Si queremos un diseño fluido (que se ajusta a la anchura de la ventana del navegador), bastaría con quitarle al contenedor el atributo width: 770px;. Si no tiene definida una anchura, la capa contenedor se ajustará al tamaño de la ventana del navegador que tenga el visitante.

Además, tendremos que darle un margen al BODY, para que el contenedor no se acople por completo al borde de la ventana. Por ejemplo, podemos darle un margen de 10 píxeles a cada lado.

Tendríamos ahora esta declaración de estilos para el BODY y la capa "contenedor":

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 10 10 10px;
   text-align: center;
   background-color: #ebebeb;
}
#contenedor{
   text-align: left;
   margin: auto;
}

Podemos ver el ejemplo en una página aparte.