Maquetación CSS a dos columnas

Vamos a 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. También mostraremos dos ejemplos para la maquetación, 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

Empezamos cargando nuestra plantilla que guardaremos en una carpeta llamada “columnas” y que guardaremos como “index.html“.

Añadimos el siguiente código HTML en el cuerpo de la página “<body> ... </body>:

Observamos 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“.

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“.

El código CSS

Vamos a crear nuestra regla CSS y la guardaremos como “css3.css” en el mismo directorio donde se guardó “index.html“, con el siguiente listado:

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 píxel, pero lo más importante es que hacemos que “flote” a la izquierda con float:left;.

Con esto  el lateral se queda a 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 con un fondo “background-color: #ffffff;“.

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.

Maquetar con los enlaces a la derecha

Simplemente vamos a cambiar las reglas  lateral y principal del código CSS.

Ahora le indicamos a la capa lateral 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.

Para un diseño fluido (que se ajuste a la anchura de la ventana del navegador), bastaría con quitarle al contenedor el atributo width: 770px;, para ello metemos la regla en un comentario.  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:

  • Cambia los márgenes en la regla body del archivo CSS prueba con márgenes a 20px, 30px y 40 px.