Unidad 17. Estilos CSS Avanzados (XVIII)



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

cabecera
menu
menu
menu
menu
menu
contenido
contenido
contenido
contenido
contenido
pie

 

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

Pág. 17.18

Atrás  Inicio  Adelante







Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.