Maquetar a 3 Columnas usando CSS

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

Escríbe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

15 comentarios en “Maquetar a 3 Columnas usando CSS”

  1. No sé qué quieres que te diga, una cosa es que te haya gustado mi artículo y lo linkes, o hagas un trackback si vas a desarrollarlo. Pero otra es que hagas un Copiar y Pegar y listo. En fin, tú mismo. Desde luego no tienes mi placet

  2. Primero le quitaría el Div que está en la linea 4 ya que hay un div demás… y la idea es que el div wrap abarque hasta abajo de todo…

    Para solucionar lo del IE lo haría de la siguiente forma (no es la única)

    Primero quitaría el Div Row (Linea 6) y el /div de la linea 19

    Luego al css le cambiaría las siguientes cosas

    #wrap{
    width:900px;
    margin: auto;
    text-align:left;
    }

    #contenedor {
    width: 900px;
    margin: 0;
    padding:0;
    display:table;
    border: 1px solid black;
    text-align:justify;
    }
    #izquierda {
    padding: 10px;
    width:150px;
    height:500px;
    float:left;
    background: #EEF;
    }
    #derecha{
    padding: 10px;
    width:150px;
    height:500px;
    float:left;
    background:#FEE;
    }
    #central{
    padding: 10px;
    width:540px;
    height:500px;
    float:left;
    background:yellow;
    }

    Los estilos de #row se pueden borrar del css…

    Con eso debería verse bien en todos los navegadores

  3. Hola, gracias parcero por el código es lo que necesitaba, andaba ratos buscando esto y me salían con vueltas raras y no servían, me sirvió seguir con la curiosidad y ha sido mas fácil de lo que pensé aunque no tuve necesidad de usar el div row, gracias por tu aporte. Éxitos.