Micaela 23 de septiembre de 2008 a las 13.49
   Imprimir artículo
elWebmaster.com

Ajustando la altura de las columnas con CSS


cssA la hora de maquetar un sitio vía CSS uno muchas veces se encuentra con un problema que pareciera muy simple de resolver pero no lo es tanto.
Imaginen por un momento que su sitio posee varios bloques div a modo de columnas, con su contenido dentro. Si no indicamos la altura de estas columnas nos encontraremos obviamente con que el bloque adaptará su tamaño según el contenido que tenga dentro.

Ahora la dificultad es qué hacer si deseamos que extienda su altura a lo largo de toda la página y que, por lo tanto, todas las columnas tengan el mismo tamaño.

Una de las soluciones que nos propone Metal.ize no es demasiado complicada.

Primero que nada habrá que incluir las columnas dentro de un bloque contenedor:

<div id=”contenedor”>
<div id=”izquierda”></div>
<div id=”central”></div>
<div id=”derecha”></div>
</div>

Y luego de esto debemos acomodar el CSS teniendo en cuenta que el html y el body también son tags, por lo que pueden modificarse sus propiedades, en este caso la altura.

html, body, #izquierda, #central, #derecha, #contenedor {
height: 100%
}

Y con esto el problema ya debería estar resuelto. Seguramente tener esto en cuenta les ahorrará más de un dolor de cabeza en su momento.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder