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.