CSS 3columnas equilibradas
3 seguidores
Hola a todos.
¿Conoceis algún método para construir 3 columnas mediante CSS y que éstas queden equilibradas en altura aunque cambie su contenido?
Se me ha ocurrido una forma de hacerlo con ayuda de javascript, pero antes quiero asegurarme de que sea posible únicamente con CSS.
Mil gracias y saludos.
---
Miguel Sánchez Pérez
<a href="http://www.miguelsanchez.com" target="_blank">www.miguelsanchez.com</a>
meddle
este en lugar de una imagen usa dos :)
nickoolas
aqui hay uno de tres columnas y cada una de ellas se ajusta a las demas en el alto, y no tienen por que ocupar todo el alto de la pagina,
http://www.pixy.cz/blogg/clanky/css-3col-layout/
ahora
que no me entero como coño funciona
pero funciona?
muy recomendable
txuma Plus
Miguel, sin acritud, pero creo que esa solución es peor. Voy a explicarme con lo que yo te he entendido que queires hacer.
Quieres conseguir el efecto visual de que las tres columnas tienen la misma altura. Bien, si lo que buscamos es ese efecto en el diseño creo que es mucho mejor la solución de un gif de fondo en un Div contenedor que complicarse con un javascript que calcula la altura del div más alto y suma las diferencia a los otros dos.
Sinceramente, creo que lo del Javascript para esto es más 'chapuza', porque estoy seguro que necesitas muchas más lineas de código (por tanto más KB) y haces un documento menos accesible (es javascript quien 'escribe' el código).
Yo alguna vez he usado también ese truco por desconocimiento de otras posibilidades, y estoy deseando eliminarlo de las páginas donde lo puse.
Bueno, este es mi consejo. La decisión final es tuya ;)
Un salu2
meddle
sinceramente, creo que entre usar el articulo de ALA (que sigo definiendo como un buen truco) y usar javascript, me quedo con el truco de ALA. Lo veo elegante y no interfiere en el marcado del documento ni su accesibilidad. Dudo que un script pueda hacerlo de manera tan sencilla y con menos KB y a la vez ser menos intrusivo (habria que verlo). Pero eso ya es cosa tuya. Suerte.
Usuario desconocido
meddle
para mi, "equilibradas en altura" significa que todas tengan la misma altura. Y en CSS solo se puede hacer poniendo una imagen de fondo a su contenedor, que imite un color de fondo de columnas. Miguel, explicate mejor, anda. :)
Creo haberme explicado correctamente :) Desde luego no considero que meter para toda la página un fondo que hace las funciones de unas columnas se pueda etiquetar como columnas equilibradas. Haciendo eso no hemos equilibrado nada, únicamente estamos rellenando el documento. Simplemente hemos diseñado un fondo que emula tres columnas montando encima la CSS. Por eso hablaba de chapuza.
Quería evitar el javascript, pero he acabado creando uno que:
- Recoge las alturas reales de las 3 capas/columnas
- Determina la que mayor altura tiene por sus contenidos
- Calcula la diferencia entre la mayor y las otras dos
- Suma a las otras dos columnas la diferencia que corresponda
Queda perfectamente equilibrado y permite además hacer una composición diferente en el resto del documento. En mi caso buscaba que la zona inferior quedara limpia, pero también podía haber necesitado una estructura distinta a las 3 columnas.
Mil gracias por vuestra ayuda y un saludo.
---
Miguel Sánchez Pérez
<a href="http://www.miguelsanchez.com" target="_blank">www.miguelsanchez.com</a>
txuma Plus
meddle
para mi, "equilibradas en altura" significa que todas tengan la misma altura. Y en CSS solo se puede hacer poniendo una imagen de fondo a su contenedor, que imite un color de fondo de columnas...
Y creo que eso es lo que él quería.... pero que nos los confirme él ;)
meddle
para mi, "equilibradas en altura" significa que todas tengan la misma altura. Y en CSS solo se puede hacer poniendo una imagen de fondo a su contenedor, que imite un color de fondo de columnas. Miguel, explicate mejor, anda. :)
txuma Plus
Creo que ser refiere a que en el truco de alisapart ponen el gif como fondo del documento, y me imagino que el quiere que las columnas se estiren sólo hasta donde llegue el contenido más alto de ellas, y después colocará otras cosas debajo, por lo que ya no le interesará que se siga repitiendo.
Por eso yo uso el 'truco' de usar un DIV contenedor con el fondo, de forma que ese DIV solo crece lo que crezcan los contenidos que tenga dentro.
Saludos
meddle
MiguelSánchez
Había leído lo de alistapart, pero me había parecido un poco chapuza. Además te obliga a que las columnas lleguen hasta abajo. Pensaba que podía existir alguna solución mejor.
chapuza? a mi me parece un truco interesante.
¿obliga a que las columnas lleguen hasta abajo? yo pensaba que era eso lo que tu querias! no se, como no te expliques mejor... :)
txuma Plus
En algunos casos uso un div contenedor y dentro los distintos div con las columnas. Le pongo el background a ese div contenedor y listo.
Usuario desconocido
meddle
usa este tuto http://css.maxdesign.com.au/floatutorial/tutorial0901.htm para crear las 3 columnas y luego este otro http://www.alistapart.com/articles/fauxcolumns/ para hacer que tengan la misma altura
Había leído lo de alistapart, pero me había parecido un poco chapuza. Además te obliga a que las columnas lleguen hasta abajo. Pensaba que podía existir alguna solución mejor.
Gracias en cualquier caso.
meddle
usa este tuto http://css.maxdesign.com.au/floatutorial/tutorial0901.htm para crear las 3 columnas y luego este otro http://www.alistapart.com/articles/fauxcolumns/ para hacer que tengan la misma altura