Quizá para muchos no sea sencillo maquetar una página HTML con CSS, y mucho menos cuando queremos maquetar a 3 columnas con encabezado y pie, para lograr un resultado parecido a este:

encabezado
col principal col
pie

Para lograrlo vamos a seguir estos sencillos pasos…
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 va a ser éste. Una vez llamada la hoja de estilos, debemos crear el 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.</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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.</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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.</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 maquetada con cabecera y pie independientes, y tres columnas, que puedes transformar en dos o en una a tu antojo, con tan solo eliminar los bloques correspondientes a las columnas laterales a tu antojo. Y funciona. Comprúebalo tú mismo.

vía | presunto culpable