Video CSS: maquetación a tres columnas con CSS

  • Por
  • CSS
Vídeo práctico sobre cómo realizar un layout a tres columnas, es decir, un esquema de página con maquetación CSS donde los contenidos se separan en tres columnas.
Estamos ante una nueva práctica de CSS que nos puede ayudar a entender mejor cómo son los procesos de maquetación de una página web, utilizando las Hojas de Estilo en Cascada. Durante 24 minutos de vídeo mostraremos cómo dividir los espacios de una página web, para mostrar sus contenidos en tres columnas diferentes y explicaremos varias otras configuraciones que podrán resultar útiles cuando estamos maquetando una página web.

Este vídeo forma parte del Videotutorial de CSS, pero al contrario que el vídeo anterior, donde explicamos cómo maquetar una web, en la que se introdujeron varios elementos típicos como cabeceras o pie, en esta práctica sólo vamos a trabajar con texto. Tendremos únicamente párrafos, que colocaremos en tres columnas distintas.

Para hacer un layout a tres columnas con CSS tendríamos varias posibles implementaciones y nosotros utilizaremos una que resulta bastante sencilla. Reaizaremos tres divisiones distintas, en tres elementos DIV. Los dos primeros haremos que "floten" a la izquierda y a la derecha y el tercero aparecerá por tanto en el medio de la página. Un resumen de la técnica aplicada se puede leer en el artículo Maquetación CSS a tres columnas.

Durante el vídeo podremos ver en directo todo el proceso de maquetación, comenzando por la creación de la estructura del HTML y continuando por la generación de estilos CSS. Además, completaremos la práctica resolviendo algunas tareas extra, como conseguir que la página aparezca centrada o ajustar algunos márgenes, con el objetivo de que las tres columnas queden alineadas verticalmente.

Completaremos la información en este vídeo ofreciendo dos versiones distintas de este layout a tres columnas, una con anchura fija y otra que se ajusta al tamaño de la ventana del navegador, lo que se conoce habitualmente como página fluida.

Así que sin más introducciones, os recomendamos seguir este vídeo sobre maquetación CSS, que esperamos resulte interesante para muchas personas.

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

jose luis

24/10/2011
css
grasias por todos estos tutoriales me han ayudado con mis paginas

Cotelandia

19/11/2011
Problema con .titcol (video)
Por alguna razón segui todo el video paso a paso pero no me deja colocarle negrita y un mayor tamaño a los títulos de las columnas de los lados. Chrome, mozilla, ie, opera y la vista previa del komodo no me lo muestran. Tengo todos los navegadores actualizado a la fecha.

Cotelandia

19/11/2011
Solución
Estube como 10 minutos revisando y no lo veía ¬¬ después de los class colocaba " : " en vez de " = " . JAjajA