menú
¿Música de YouTube sin molestos comerciales? ¡Ahora es posible!
TubeFiesta es una aplicación que te permite reproducir música de YouTube como un reproductor tradicional.
Crear listas, reproducción aleatoria, repetir, y hasta exportar el video a otra pantalla.
Conocer más Ir a tfiesta.com

Multiples columnas HTML y CSS sin tablas

Publicado el 09/07/2014 | 1926 visitas

En esta oportunidad quiero centrarme en las diferentes formas de posicionar elementos en varias columnas en una página Web, ya que muchas veces por desconocimiento recurrimos a utilizar tablas HTML limitando así la capacidad de sacarle un mayor provecho al CSS.

columnas html y css

Sin olvidar los tipos de etiquetas html vamos a realizar varios ejemplos con algunas propiedades CSS que nos servirán para posicionar de manera vertical los contenedores que necesitemos (div, section, article, etc.) y así conseguir una página con varias columnas.

Aclaro que estos métodos también son muy útiles para hacer sliders o visualizaciones de portafolios.

vertical-align CSS

En un articulo anterior conocimos la propiedad inline-block que nos permite hacer que una etiqueta se comporte como elemento en linea pero a la vez podamos manipular su ancho y alto. Si necesitáramos hacer un sitio con dos columnas podemos usar esta propiedad así:

Como puedes ver, perfectamente tenemos dos columnas pero con un detalle: El alto de la columna 1 parece que hace correr hacia abajo la columna 2.

Esto lo solucionamos poniéndole a la columna 2 la propiedad vertical-align con el valor top

Para aplicar estas "reglas" en un sitio Web con varias columnas es necesario establecer un ancho fijo a todas las columnas (ya sea en px, porcentaje, etc.), ya que si no lo hacemos cada columna tomará un ancho automáticamente dependiendo del contenido que tenga.

Como notarán en la pestaña de resultados (result) hay una pequeña margen entre la columna 1 y la columna 2, esto es demasiado molesto en muchas ocasiones (como por ejemplo al hacer un slider) ya que esa margen suma ancho al tamaño total de la columna y se vuelve inmanejable en diversos navegadores. También es algo que aún no puedo explicar (lo desconozco) pero se que con la siguiente propiedad css se puede solucionar (y que por cierto, es muy utilizada para realizar columnas múltiples).

float css

Empecemos diciendo que la propiedad float tiene los valores left y right entre otros, que permiten hacer flotar los elementos hacia un lado especifico.

Al hacer flotar dos elementos que comparten el mismo contenedor podemos hacer que se ubiquen uno al lado del otro (dos columnas) tal cual lo hicimos con las propiedades inline-block y vertical-align.

En el resultado anterior podemos observar que creamos las mismas 2 columnas, esta vez no hay espacios ni margenes entre ambas.

Hasta aquí ha llegado esta entrada, espero que sea de utilidad. Por favor hazme saber si sirven estos contenidos, así me anima a continuar publicando :P

Talvez te interese...

[Truco] Contar caracteres en Google Chrome
Mejora la primera impresión con una WebFont
Flashes de cámara con JQuery
Lluvia de colores con JQuery
blog comments powered by Disqus