Tecnología

Cómo crear columnas con la propiedad flotante de CSS

Escrito por ehow contributor | Traducido por beatriz sánchez
Cómo crear columnas con la propiedad flotante de CSS

Cómo crear columnas con la propiedad flotante de CSS. No tengas miedo por pensar en dejar las tablas de diseño. Las columnas de diseño CSS pueden ser creadas de forma confiable con la propiedad "float" (flotante).

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Conocimientos básicos de HTML
  • Conocimientos básicos de CSS

Lista completaMinimizar

Instrucciones

    Usa DIV para crear columnas

  1. 1

    Hay varios pasos para conseguir las columnas que ves en la imagen introductoria al principio del artículo. El primer paso es crear un contenedor DIV que contendrá todo lo que hay en el diseño. Esto te ayudará a mantener cosas como las cabeceras y pies de páginas alineados con todo lo demás. Aquí hay un ejemplo de regla #container en CSS: #container { width: 700px; } La anchura no tiene por qué estar en píxeles. Puede estar en rayas o porcentajes. También puedes incluir un color de fondo, bordes y muchas otras propiedades CSS en esta regla.

  2. 2

    Dentro del contenedor DIV, inserta un DIDV para la columna de contenido y un DIV para la columna de barra lateral. Tener el contenido antes en el documento mejora la accesibilidad. Para hacer que tenga el aspecto de la columna izquierda, el siguiente paso es ajustar la anchura de la columna y conseguir que flote en el margen izquierdo (del contenedor): #content { width: 65%; float: left; } La anchura puede estar en píxeles, rayas o porcentajes. Haz que el contenido tenga unos dos tercios de la anchura del contenedor, dejado un tercio de la anchura para la barra lateral.

  3. 3

    Para colocar el DIV de la barra lateral, le das una anchura y un margen izquierdo muy grande. #sidebar { width: 30%; margin-left: 70%; } Puedes usar píxeles, rayas o porcentajes para ajustar la anchura. Elige una unidad que encaje con lo que elijas para el contenido y el contenedor. En este ejemplo, la barra lateral está colocada a la derecha del contenido, que flota a la izquierda. Deja suficiente margen en el lado izquierdo de la barra lateral para dejar espacio para el DIV de contenido. Puesto que la barra lateral está limitada a una anchura del 30% y tiene una configuración de margen izquierdo ancha, la barra lateral no se envolverá bajo los contenidos flotantes, incluso si es la columna más larga.

Consejos y advertencias

  • Si quieres que el DIV de contenido esté a la derecha, usa float:right. Después adáptalo de acuerdo al margen derecho del DIV de la barra lateral.
  • Los bordes, imágenes de fondo o colores de fondo y otras muchas propiedades CSS pueden ser utilizadas para crear cada columna visualmente distinta en tu diseño de página.
  • Si quieres incluir un DIV de pie de página dentro del contenedor, asegúrate de usar la regla clear: both para colocarlo debajo del DIV de contenido flotante y colocarlo al final del contenedor.

No dejes de leer...

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media