Maquetación CSS a dos columnas

  • Por
  • CSS
Mostramos cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con una distribución de 2 columnas, una cabecera y un pie de página. Con diseño de anchura fija o fluido.

Vamos a ver cómo realizar una maquetación a dos columnas con CSS, sin utilizar tablas. Además de las dos columnas, para completar la estructura típica de una web, colocaremos una cabecera y un pie de página.

El ejemplo pretende ser el inicio de una serie de artículos para mostrar cómo realizar distintos tipos de plantillas, maquetando con CSS en lugar de tablas. Iremos publicando estos artículos en nuestro Taller de CSS.

Empezamos mostrando los dos ejemplos de maquetación que veremos en este artículo, siempre con dos columnas, dejando la columna con los enlaces de la barra de navegación a la izquierda o la derecha.

El código HTML

El código HTML de los dos ejemplos que hemos adelantado es el mismo. Básicamente este:

<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="principal"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    ...... 
   </div> 
  </div> 
  <div id="pie"> 
  © 2005 DesarrolloWeb.com 
  </div> 
</div>

Se puede ver que tenemos una capa contenedor, que engloba todo el código. Luego, dentro del contenedor tenemos tres bloques. La cabecera, el cuerpo y el pie de página. La cabecera y el pie de página son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde tendremos las dos columnas es el cuerpo.

Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte, que hemos llamado "lateral", con una lista de enlaces (sería la barra de navegación) y otra parte con el texto de la página, que hemos llamado "principal".

El código CSS

Como habíamos adelantado, veremos dos variantes de codificación a dos columnas, con los enlaces a la izquierda y a la derecha. No obstante, la mayor parte del código CSS de ambos ejemplos es la misma, pues sólo varía la declaración de estilos de la capa "lateral" y de la capa "principal".

Maquetar con los enlaces a la izquierda

Veamos la codificación CSS para la página con los enlaces a la izquierda.

<style type="text/css"> 
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; 
} 
#principal{ 
   margin-left: 170px; 
   background-color: #ffffff; 
   padding: 4 4 4 4px; 
} 
#pie{ 
   background-color: #cccccc; 
   padding: 3 10 3 10px; 
   text-align:right; 
}

La parte que vamos a remarcar es donde se define el estilo del lateral y la capa principal. El lateral hacemos que tenga un tamaño fijo de 160 pixel, pero lo más importante es que hacemos que "flote" a la izquierda con float:left;. Esto hace que el lateral se quede en la izquierda y permite que el contenido insertado después del lateral se coloque a la misma altura, pero a la derecha.

Por su parte, para la capa principal, simplemente se indica que tiene un margen a la izquierda de 170 píxeles. Esto hace que se coloque al lado de la capa lateral, dejando un espacio en blanco de 10 píxeles. Tiene un margen de 170, de los que 160 son para el espacio que va a ocupar la capa de los enlaces y 10 píxeles de espacio entre la capa principal y la lateral.

Como la capa principal no tiene definida su anchura, se hará tan grande como lo permita el contenedor.

Nota: Estas explicaciones no son completas de todo el ejercicio. Se supone que el lector ya tiene asimilados algunos conceptos que se han explicado en el Manual de CSS o en el Taller de CSS.

Podemos ver el ejemplo en marcha en una página aparte. Como es un archivo HTML, podemos ver el código fuente para ver cómo queda el conjunto de maquetación y declaración de estilos completo.

Maquetar con los enlaces a la derecha

Continuamos mostrando los cambios que habría que hacer para maquetar la página con la columna de enlaces a la derecha. Simplemente vamos a cambiar el código CSS de las capas lateral y principal.

#lateral{ 
   width: 160px; 
   background-color: #999999; 
   float:right; 
} 
#principal{ 
   background-color: #ffffff; 
   padding: 4 4 4 4px; 
   margin-right: 170px; 
}

Ahora la capa lateral estamos indicando que flote a la derecha. Por su parte, en la capa principal hemos cambiado el margen que había antes hacia la izquierda para ponerlo en la parte de la derecha.

Podemos ver el ejemplo en una página aparte.

Diseño fluido

Hasta aquí en este artículo hemos visto cómo hacer un diseño con una anchura fija. Si queremos un diseño fluido (que se ajusta a la anchura de la ventana del navegador), bastaría con quitarle al contenedor el atributo width: 770px;. Si no tiene definida una anchura, la capa contenedor se ajustará al tamaño de la ventana del navegador que tenga el visitante.

Además, tendremos que darle un margen al BODY, para que el contenedor no se acople por completo al borde de la ventana. Por ejemplo, podemos darle un margen de 10 píxeles a cada lado.

Tendríamos ahora esta declaración de estilos para el BODY y la capa "contenedor":

BODY { 
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
   margin: 10 10 10 10px; 
   text-align: center; 
   background-color: #ebebeb; 
} 
#contenedor{ 
   text-align: left; 
   margin: auto; 
}

Podemos ver el ejemplo en una página aparte.

Autor

Miguel Angel Alvarez

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

solange

02/11/2005
Hola, como harias para que la columna de la izquierda (botonera) se alargue a medida que se alarga la columna de la derecha (contenido)?.
Gracias!

Pioja

09/8/2007
como harias para que la envoltura crezca con respecto a tu columna lateral que esta como float.. si el contenido de la columna lateral derecho es mayor al contenido de principal esta pasara por encima del pie .. =/

Paula

23/10/2009
posición absoluta y relativa de las capas
Hola! Bueno el artículo.
Y quería hacer una consulta sobre el posicionamiento de capas. A las capas que forman las columnas, cabecera y cuerpo de la página le debo dar posición relativa o absoluta?
Estoy trabajando con dreamweaver, y elaboro una capa grande (de 750 px por 600) y luego hago las columnas, cabecera, etc, con otras capas. A la capa de 750 px le pongo posición absoluta, y a las otras capas que posición le debo poner? (en clear les estoy dando las posiciones que figuran en esta explicación)
Espero sus respuestas
Desde ya gracias
Paula

chivas2008

30/10/2009
"Se me amontona todo"
Hola, estoy incursionando en el diseño de página web usando css, ya entendí como definir los identificadores y las clases sin embargo, cuando aplico los estilos a las diferentes secciones de la página, veo todo amontonado, no como se supone que lo he diseñado, me puedes ayudar para ver que estoy haciendo mal?

lapolona

17/2/2010
maquetacion css
hola tengo una pagina web hecha con css con una plantilla de cabecera de 3 columnas cabecera y pie y necesito que al pinchar en los enlaces del menu de la primera columna me salga el contenido en la segunda columna en vez de en una pagina aparte pero no consigo dar con la solucion

wmanguiano

02/4/2010
dato importante
Creo que es importante mencionar que el doctype del html debe ser

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

de manera que de vea correctamente el documento de los contrario se corre con el riesgo que no se vea exactamente igual al del ejemplo como me sucedió a mi cuando mi editor de html me generó automatico un doctype para xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

definitivamente no funciona igual

wmanguiano

02/4/2010
dato interesante
Hay q comentar que es importante verificar que el doctype del archivo html sea de un html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ya que de lo contrario el estilo puede no aparecer igual que en el ejemplo justo como me pasó a mí cuando puse un doctype de xhtml1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Y definitivamente un estandar xhtml1 no ve el css de la misma manera que un html4

toba

25/10/2010
muy bueno el articulo me fue de mucha ayuda
hola el articulo esta muy interesante y a servido mucho, solo tengo una duda, como hago para que el PIE siempre aparezca al final de la pagina sin importar la cantidad de contenido que tenga

kana

03/5/2011
Spam!
http://www.erepublik.com/en/referrer/Kanalejana

JSUfQPhDOEaPV

04/11/2011
nRvTUiXInHyECl
This is an article that makes you think “never tuhoght of that!”

zettabyter

21/1/2013
Muchas gracias por el tutorial
El estándar que manejé es XHTML 1.0 y funciona de la misma manera en HTML 4.01, todo el tutorial está bien, las personas que no pudieron es porque algo hicieron mal, en el documento html primero va el ?div? que se le aplicara el estilo ?float?, si lo pones después del ?div principal? quedara descuadrado.

Selene

21/7/2015
Estoy muy agradecida.
Su blog es genial, me ha enseñado un buen de programación. En serio, lo amo, si hubiera un lugar para hacer donativos, con gusto lo haría (si lo hay diganme)

damian

11/2/2017
bocina de avion
estos códigos son tan inútiles como bocina de avión o es que están 100% obsoletos, no dividen la pantalla ni hacen nada solo crean texto en html...