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
12 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?
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
Corrección: para que funcione en el Chrome hay que restarle 2px al div izquierda, centro ó derecha…
Se ve que incluye los bordes en la cuenta…. :$
Saludos
Este Estilo de maquetacion ultrasencillo no me gusto, y para que truene en los navegadores.. prefiero convinar capas absolutas, relativas & Hidden y hacer web agradables, no de columnas.