Unidad 17. Estilos CSS Avanzados (XVIII)

Ahora combinando los márgenes y los elementos flotantes podemos crear columnas de una forma muy sencilla:

La forma es la siguiente:

1. Creamos una cabecera. No hace falta que se le aplique ningún estilo en especial a no ser que queramos darle un alto fijo, pero hemos preferido añadir unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de los elementos).
   cabecera
2. Luego creamos otro bloque utilizando divs.
   cabecera

   menu
   menu
   menu
   menu
   menu
3. A este último bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).
   cabecera

   menu
   menu
   
4. Luego creamos un tercer elemento que contendrá la segunda columna.
   cabecera

   menu
   menu
   

   contenido
   contenido
   contenido
   contenido
   contenido
5. A este elemento deberemos darle un margin-left del mismo tamaño que la anchura de la primera columna. Así nos aseguramos de que se encuentren en el mismo nivel (porque el elemento de la izquierda está flotando) pero no vuelva a tomar el flujo normal cuando el bloque de la izquierda haya acabado.
   cabecera

   menu
   menu

   contenido
   contenido
   contenido
   contenido
   contenido
6. Finalmente añadimos un nuevo bloque que utilizaremos como pie de página.
   cabecera

   menu
   menu
   menu
   menu
   menu

   contenido
   contenido

   pie
7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento flotante no le afecte en caso de que el contenido fuese demasiado corto.
   
   cabecera

   menu
   menu
   menu
   menu
   menu

   contenido
   contenido
   

   pie

No es la única forma de conseguir este efecto. Podemos hacer las dos columnas flotantes, emplear Divs PA, etc...

 Cursos Informática Gratuitos