Maquetación CSS a tres columnas

  • Por
Veamos cómo hacer una página, maquetada únicamente con Hojas de Estilo en Cascada, compuesta por tres columnas. Con diseño de anchura fija y fluido.
Continuando nuestros talleres de CSS, vamos a ver ahora como hacer una estructura de tres columnas para una página web. Esta es una estructura bastante típica de portal. En una de las columnas se suele situar la barra de navegación, en otra el contenido y en la última una serie de banners con promociones.

Sería bueno ver el resultado que buscamos en una página aparte.

Este artículo va a presuponer que el lector comprende ya la maquetación con CSS y que ha leído el artículo Maquetación CSS a dos columnas. Nos basaremos en ese artículo para componer la página con CSS a tres columnas.

En líneas generales, la posibilidad que vamos a explorar a continuación para maquetar una web con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda flotando a la izquierda, la columna de la derecha flotando a la derecha y por último pondremos la parte principal, que aparecerá en el centro de la página.

El código HTML para hacer este ejemplo será el siguiente:

<div id="contenedor">
    <div id="cabecera">
       Cabecera 01
    </div>
    <div id="cuerpo">
       <div id="lateral">
          <ul>
             <li><a href="#">Enlace 1</a>
             <li><a href="#">Vínculo 2</a>
             <li><a href="#">Otro enlace</a>
             <li><a href="#">Link chulo</a>
             <li><a href="#">Más enlaces</a>
             <li><a href="#">Otro último</a>
          </ul>
       </div>
       <div id="otrolado">
          <img src="bannerlateral.gif" width="120" height="600" alt="">
       </div>
       <div id="principal">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
          ...
       </div>
    </div>
    <div id="pie">
       © 2005 DesarrolloWeb.com
    </div>
</div>


Vemos que la página contiene tres partes, la cabecera, el cuerpo y el pie. La cabecera y el pie se colocarán en el documento ocupando todo el ancho disponible. La parte donde colocaremos las tres columnas es el cuerpo.

Dentro del cuerpo, como podemos ver, tenemos tres capas. La capa "lateral", que es la que hemos pensado colocar a la izquierda. Luego está la capa "otrolado", que es la que planeamos colocar a la derecha. Por último está la capa "principal", que es la parte central. La capa "principal" aparecerá en el centro, porque a los dos lados estarán ocupados por las capas laterales.

El CSS que vamos a utilizar para maquetar esto será el siguiente. Se parece mucho al ejemplo de maquetación CSS a dos columnas. Luego lo comentaremos.

BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ebebeb;
}
#contenedor{
    text-align: left;
    width: 770px;
    margin: auto;
}
#cabecera{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
}
#cuerpo{
    margin: 10 0 10 0px;
}
#lateral{
    width: 160px;
    background-color: #999999;
    float:left;
}
#lateral ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
}
#lateral li{
    background-color: #ffffcc;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
}
#lateral a{
    color: #3333cc;
    text-decoration: none;
}
#otrolado{
    width: 120px;
    float: right;
}
#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    width: 460px;
}
#pie{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
}


Tendremos un contenedor, de 770 píxeles (px) de ancho, que es donde vamos a colocar todas las capas. Nos centramos en explicar la zona del cuerpo, que es donde aparecerán las tres columnas.

Vemos como la capa "lateral" tiene definido un ancho de 160 px, y un float: left; para que flote a la izquierda. Vemos luego como la capa "otrolado" tiene 120 px de ancho y flota a la derecha.

Luego vemos la capa "principal", que tiene un margen a la izquierda de 170 px, para dejar un espacio con respecto a la capa "lateral". 170 px porque la capa "lateral" ocupa 160 px de ancho, más 10 px que es lo que realmente estamos poniendo de margen. En la capa "principal" también hemos definido un ancho de 460 px, para que ocupe justo el espacio que queda en el centro.

Se puede ver el ejemplo en marcha en una página aparte.

Diseño fluido

Los diseños fluidos son los que se ajustan a la anchura que tengamos en la ventana del navegador. En el anterior ejemplo el diseño tenía una anchura fija de 700 píxeles y ahora vamos a hacer un par de modificaciones para que el diseño se ajuste a la ventana del navegador.

Simplemente tendremos que quitar la definición de anchura de la capa "contenedor".

#contenedor{
    text-align: left;
    margin: auto;
}


Luego, también quitaremos la definición de anchura de la capa "principal" y añadiremos el atributo margin-right: 130px; para que la capa con el contenido central tenga un margen con respecto a la capa que queda a la derecha. 130 px porque la capa de la derecha ocupaba 120 px, más 10 px que es realmente el margen que estamos dejando.

#principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    margin-right: 130px;
}


Podemos ver el ejemplo en una página aparte.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Nicolas Adones

05/10/2005
Una Consulta... como abro links solamente en el medio? Algo así como si tuviese un Iframe central en el cual abrir los contenidos.

oloranube

05/2/2006
Un pequeño detalle que tal vez pase desapercibido y pueda dar algún dolor de cabeza es el del margen izquierdo de la capa principal de 170 px. Sin especificar ese margen, si el contenido de la capa principal hiciese que está tuviese más altura que la lateral, el final de la capa principal se ajustaría totalmente a la de lateral, se metería el contenido debajo (que mal me explico). De todas formas este sólo pasa con Mozilla porque con Opera y el Explorer no.

Cristian

16/7/2009
Genial
La verdad es que es impecable el ejemplo, no sabes cuanto te doy gracias por este excelente artículo. Te felicito y gracias por hacerlo facil de entender y con tantos detalles!!!
Cristian

Jhorman Rodriguez

11/12/2009
Gracias por el post
Gracias a vos aprendì a hacer una maquetacion basica en css, pues me comia el orden de los div (ponia el izquierdo, luego el centro y luego la derecha, -pues por logica seria asì- , pero no, observé detalladamente su post y comprendì...
Ahora no me come una maquetacion sencilla.

unuser

30/12/2009
tres columnas?
creo ver un tutorial sobre como hacer una web con 3 FILAS!!!!!!! no columnas tan memo eres que nisiquiera sabes diferencias una fila (horizontal) con una columna (vertical) quizas deberias dedicarte ha hacer golosinas....

unuser

30/12/2009
me disculpo xD
perdon miré el codigo por encima ya he visto que si esta a 3 columnas, sorry

Carlos Llaña

01/3/2010
Un pequeño comentario
Las etiquetas <li> no están cerrando. Puede dar problemas al usar este código.
Saludos

Antonio

27/4/2010
Como hago para que el cuerpo se junte con la cabecera
Como hago para que el cuerpo se junte con la cabecera, pues he visto que la cabecera no tiene margenes, y el cuerpo (margin: 10 0 10 0px;) pero pongo a "0px" el margen de arriba pero no consigo que se junten estos div, ruego que me digas como hacerlo, un saludo.

tavoRacho

04/5/2010
pregunta
Yo tambien tengo la duda de como abrir los links de un menu en la parte del div de los contenidos
gracias

angel

18/5/2010
hola que tal, necesitop de su ayuda
he estado estudiando y poniendo en practica lo aqui explicado en cuanto a mauetacion con css
solo q estoy atorado con algo y ya estoy al borde del colapso

yo estoy maquetando una pagina con 2 columnas una cabecera y un pie de pagina
y todo va bien hasta el momento en que el pie, x mas q quiero separarlo de las demás capas no logro hacerlo asi como está en este ejemplo:
http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta3columnas/

ya estoy algo mas q desesperado

ojala pudiesen ayudarme se los agradeceria mucho
saludos

claudio

07/6/2010
el both
quizas no colocaste el clear: both en el footer.. revisa

midesweb

08/6/2010
clear
Hola!

Una forma de que la capa pie (o cualquiera que pones debajo de las tres columnas) acepte y se vea el margin es ponerle antes del pie algo como esto

<div style="clear:both;"></div>

eurowilgon

18/8/2010
3 cajas identicas
hola, muy bueno el artículo, tengo una duda sobre cómo colocar tres cajas div idénticas una al lado de otra, a manera de un cuerpo de tres columnas, pues hice una prueba colocando:

caja1: float=left
caja3: float=right

cuando trato de poner la caja2 bien sea "float=left" o "right" y tratando con clear=none no la puedo poner al lado, Estoy haciendo pruebas con Dreamewaver CS4

Muchas gracias por su apoyo

rodrigo

24/5/2011
div con height 100%
tengo un problemilla estoy maquetando con 3 divs y en ocaciones el contenido de uno es mas grande que el otro y no logro hacer que se ajusten en altura los tres divs, no se si me explique...

JOSE

30/12/2011
pagina con 3 columnas
Estoy haciendo una pagina con 3 columnas y la parte de centro cuando añado algo en la columna de izq o de la dcha se me va bajando para abajo.

Jorge

22/11/2013
dos columnas de anchos móviles
Hola Miguel.<br />
Gracias por tu post, me resulto una gran ayuda. Quiero pedirte un favor si es posible me aclares una duda.<br />
Supongamos que quiero hacer una página en la que haya dos columnas. Una columna principal a la izquierda digamos de 600px de ancho y otra la derecha de 200px. Hasta ahí todo bien.<br />
Mi duda es: ¿cómo hago si quiero que la columna derecha (la de 200px) solo sea visible cuando tenga algún contenido adentro? Si no tiene ningún contenido, entonces quiero que no se muestre y que la columna principal (la de 600px) pase a ocupar el espacio que dejó libre la columna derecha; osea que pase a tener 800px de ancho.<br />
¿Es posible hacer esto con CSS o alguna otra cosa tal como JavaScript?<br />
Te agradezco cualquier información que puedas brindarme.<br />
Saludos.<br />
Jorge