Maquetar una web a 3 columnas con CSS

Enfrentarse a una hoja CSS para maquetar una página Html no es de por sí sencillo. Lo sé. Pero la cosa se complica aún más si lo que queremos es tener una maquetación a tres columnas con encabezamiento y pie.

Últimamente ya nos están llegando pequeños anticipos de la sencillez con que se prevé que puedan generarse columnas partiendo de las especificiaciones de CSS·3. Pero mientras tanto, tenemos que usar las herramientas que tenemos, y éstas pasan por CSS·2.
De modo que hoy, amiguitos, en Barrio CSSésamo os vamos a dar unas sencillas y efectivas orientaciones para conseguir una maquetación en tres columnas limpia y rápida.

Primero, echemos un vistazo a nuestro archivo CSS. Deberá contener algo así:

body {
       margin:0; padding:0;
       font-size:80%;
       font-family: sans-serif;
       }
       #wrap{
       width:780px;
       margin: auto;
       text-align:left;
       }
       #header{
       height:100px;
       background: url(../img/header.jpg)
       no-repeat top left;
       margin: 0 0 0 0;
       padding: 0 0 0 0;
       }
       #contenedor {
       width: 80%;
       margin: auto;
       padding:0;
       display: table;
       border: 1px solid black;
       }

       #row {
       display: table-row;
       } 

       #izquierda {
       width:150px;
       padding:1em;
       background: #EEF;
       display: table-cell;
       }

       #derecha{
       width:150px;
       padding:1em;
       background:#FEE;
       display: table-cell;
       }

       #central{
       padding: 1em;
       background:yellow;
       display: table-cell;
       }

       #pie{
       clear:both;
       margin: 0 0 0 0;
       padding: 0 0 0 0;
       }

Y el código para el archivo HTML de la página web va a ser éste. Una vez llamada la hoja de estilos, debemos crear el <body> siguiendo el siguiente esquema:

 <body>
       <div id=”wrap”>
       <div id=”header”><p>Título de tu página.</p></div>
       </div>

       <div id=”contenedor”>
       <div id=”row”>
       <div id=”izquierda”>
       <h4>Col. Izq.</h4>
       <p>Lorem ipsum dolor sit amet, consectetuer
       adipiscing elit. Vestibulum rutrum, urna
       eget gravida auctor, mauris neque tempus lorem,
       non condimentum sem purus et eros. Donec non lectus.
       Phasellus eu  massa. Praesent felis metus, tempor a,
       vehicula ut, interdum id, libero.</p>
       </div>

       <div id=”central”>
       <h4>Col. Central</h4>
       <p>Lorem ipsum dolor sit amet, consectetuer
       adipiscing elit. Vestibulum rutrum, urna
       eget gravida auctor, mauris neque tempus lorem,
       non condimentum sem purus et eros. Donec non lectus.
       Phasellus eu  massa. Praesent felis metus, tempor a,
       vehicula ut, interdum id, libero.</p>
       </div>

       <div id=”derecha”>
       <h4>Col. Dcha.</h4>
       <p>Lorem ipsum dolor sit amet, consectetuer
       adipiscing elit. Vestibulum rutrum, urna
       eget gravida auctor, mauris neque tempus lorem,
       non condimentum sem purus et eros. Donec non lectus.
       Phasellus eu  massa. Praesent felis metus, tempor a,
       vehicula ut, interdum id, libero.</p>
       </div>
       </div>
       </div>
       <div id=pie”>
       Aquí el contenido de tu pie de página.
       </div>
       </div>
       </body>

El efecto que conseguiremos será una página web maquetada con cabecera y pie independientes, y tres columnas, que puedes transformar en dos o en una a tu gusto, con tan solo eliminar los bloques correspondientes a las columnas laterales a tu antojo.

Artículos Relacionados
Estructura de páginas web: Cómo hacer para que lo importante aparezca primero
Cuando nos encontramos optimizando una página web para los buscadores, una de las cosas que...
Diseñar una página web para varias resoluciones de pantalla
Una de las dificultades más importantes a la que se enfrentarán los diseñadores web es...
Crear esquinas redondeadas con CSS y sin imagenes
Hay muchas maneras de crear esquinas redondeadas con CSS, lo de usar tablas para...
Menu desplegable con CSS y HTML
Ya vimos como hacer un menu con submenus en LaWebera.es, ahora vamos a retomar el...

Última Actualización: 14/12/09