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
9 Comentarios (Agrega el tuyo)
No sé,
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
Gracias, justo lo que andaba buscando
saludos desde el Valle de Aconcagua
Exelente articulo estaba obsecionado con hacerlo con divs… en vez de tablas y justo este era el modelo que queria utilizar para mi sitio.. gracias.
Te pasaste un
un div (cierre)
No funciona en ie7!!! se descuadra
en firefox el pie se tira a la izquierda
Definitivamente no funciona en IE7, en firefox 3.0 si funcionapero el pie se va muy a la izquierda.
Es verdad no funciona en IE7, alguien conoce solución para este problema?