Saltar a Comentarios

Lunes, Marzo 16th, 2009

Columnas con la misma altura

El problema que planteo es el siguiente: tu creas tu layout con tres columnas y luego quieres que tus columnas, aunque dos de ellas no tengan contenido, lleguen siempre hasta la altura de la que más contenido tenga. Normalmente obtienes algo así:

Comlumnas css

¡No se alargan las columnas como quieres!, es debido a que lo normal, es que las columnas se expandan según el contenido que tengan. Una opción rápida y chapuzas, sería poner un display:block a cada columna con el height deseado. Pero ¿Y si este es el layout general?, ¡entonces tendríamos que cambiarlo a todas nuestras páginas internas!, vamos una locura y algo muy feo..

¿La solución?

Asignar a las tres columnas, un padding bajo muy grande (32768px es el número máximo de pixeles posibles) y a su vez un margin negativo igual de grande. A su vez, deberemos crear un contenedor global que oculte lo que sobra.

#izquierda, #central, #derecha {
    padding-bottom: 32768px;
    margin-bottom: -32768px
}
#contenedor {overflow: hidden}

Desventajas

  • Requiere de un contenedor div extra
  • Si vas a usar anclas en la misma página ( <a name=”seccion”></a> ) y este ancla estiviera dentro de esta columna, el contenido que esté antes de ese ancla desaparecerá y permanecerá invisible.
  • Me da un poco de rabia no haberlo encontrado antes :)

Entradas Relacionadas

Comentarios Cerrados.