Menú Cerrar

Columnas de igual altura con CSS

Uno de los problemas habituales que me he encontrado al crear webs es el como hacer que varias columnas tengan la misma altura. Una forma de resolver esto era utilizando tablas. La otra opción era poner la misma altura a las columnas y no sobrepasarla nunca. Estos dos métodos no son los mejores, es preferible no utilizar tablas y en el otro es fácil no controlar los tamaños de los contenidos. Este problema es claramente visible al instalar Drupal con el tema por defecto Garland:

En el bloque del pie se suele poner datos como el copyright, etc. Cuando el contenido no ocupa mucho y el menú es más alto, queda ridículo ver el pie tan arriba.

Hay dos métodos más recomendables para conseguir columnas iguales en altura, los dos consisten en poner un div como contenedor y dentro las columnas:

El primero de estos métodos consiste en hacer que los div con menor altura tengan el mismo fondo que el div contenedor:

El código CSS:

	#container {
	    background-color: #fff;
	    overflow: hidden;
	    width: 780px;
	    margin: 10px auto 5px auto;
	    border: 1px solid #000;
	}  #content {
	    background-color: #fff;
	    width: 580px;
	    border-right: 200px solid #0099FF; /* ancho y color del menú */
	    margin-right: -200px;
	    float: left;
	}
	#menu {
	    width: 200px;
	    float: left;
	    color: #fff;
	    background: #0099FF;
	    text-align: left;
	} 

Y el HTML:

<div id="container">

<div id="content">bla bla bla bla bla bla bla bla</div>

<div id="menu">bla bla bla bla ... bla bla bla bla</div>

</div>

El problema de este método viene cuando el fondo del div contenedor tiene otro color o imagen:

El segundo método es el mejor método que he visto hasta la fecha y que utilizo desde que lo conozco. Consiste en establecer la propiedad CSS overflow del contenedor a hidden y en las columnas: padding-bottom a un valor alto, en mi caso 32767px y margin-bottom al mismo valor pero negativo, -32767px. Alguna vez los he establecido a 30000px y -30000px, a partir de cierta altura en pixeles es indiferente el valor, pero tiene que ser grande. Esta solución la encontré en un artículo de www.positioniseverything.net. Su explicación sería que con el excesivo padding-bottom se consigue añadir un gran relleno. El margin-bottom negativo hace que el flujo del documento vuelva al sitio. Todo lo que sobra se elimina con el valor hidden en el overflow del contenedor, quedando todo cuadrado:

El CSS:

	#columna1, #columna2, #columna3{	
		padding-bottom: 32767px;
		margin-bottom: -32767px;
		float: left;
		width: 33%;
	}
	#columna1
	{
		background-color: #f00;
	}
	#columna2
	{
		background-color: #0f0;
	}
	#columna3
	{
		background-color: #00f;
	}
#contenedor
	{
		overflow: hidden;
		background-color: #fff;
	}

El HTML:

<div id="contenedor">
<div id="columna1">

columna 1

bla bla bla bla

...

bla bla bla bla

</div>

<div id="columna2">

columna 2

bla bla bla bla

bla bla bla bla

</div>

<div id="columna3">

columna 3

bla bla bla bla

...

bla bla bla bla

</div>
</div>

Es una solución que al principio asusta por la cantidad de pixeles que se añaden pero que al verla funcionar se quitan todos los miedos.

5 comentarios

  1. Roger Alexander

    Muchas gracias me ha sido de mucha utilidad pero tengo un problemita, con la ultima solucion cuando pogo overflow:hidden al contenedor se me daña la pagina aparece vacía con lo demás me funciona correctamente pero me queda muy larga no se si puede haber una solucion

  2. David

    Roger, ¿podrías poner el código? Sin más datos lo que se me ocurre es que al contenedor le afecta algo que hayas definido en otra parte del CSS. Pudiera tener una altura 0px o verse afectado si este contenedor está dentro de otro.

Los comentarios están cerrados.