Maquetar una web a 3 columnas con CSS

Actualizado el 02/04/2008 < > 4 Cometarios

Resúmen: Explicación sobre como diseñar una página web de 3 columnas usando CSS y HTML.

Meneame Bitacoras

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.

Meneame Bitacoras

Publicado el 02/04/2008, última actualización 02/04/2008.

Autor: Raúl García Carrero

URL: Presunto Culpable

Añadir Comentario (Subir al texto)

4 Cometarios

  1. El balance en el diseño web

    [...] página web basada en simetría vertical implica que sus contenidos se encuentran distribuidos en dos o más columnas más o menos definidas que ocupan todo el largo de la página. En algunos casos, luego de [...]

    Lunes, 4 de enero 2010

  2. Estructura de páginas web: Cómo hacer para que lo importante aparezca primero

    [...] y los diferentes contenidos aparecen alineados en forma vertical. Esto se debe a que el proceso de maquetación aún no ha comenzado, y la página se verá de la siguiente [...]

    Lunes, 22 de febrero 2010

  3. Introducción a la maquetación de páginas web

    [...] maquetación de una página web es el orden en que se colocan los elementos que la componen, de forma que tenga [...]

    Miércoles, 7 de abril 2010

  4. Utilización de la repetición y posición de fondos en la maquetación de páginas web

    [...] maquetar una página web, muchas veces es necesario utilizar los fondos de los elementos como parte de la [...]

    Viernes, 18 de junio 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios