Muchas veces más de uno de nosotros nos hemos encontrado con “columnas” de distinto tamaño. Es decir, cajas de diferente altura. Siempre queremos conseguir que independientemente del contenido de las mismas la altura sea igual para todas.

Con CSS de forma muy muy sencilla podremos conseguir esto, no tenemos que recurrir a Javascript para modificar dinámicamente las alturas de la cajas, ni usar otros métodos que acumalan demasiados divs para conseguirlo, y que luego abarcan problemas del diseño de la estructura.

Ahora veremos que usando los atributos display:table; display:table-row; y display:table-cell; conseguiremos convertir las cajas o divs en una tabla, y ya sabemos que con las tablas nunca veremos una celda más alta que otra de la misma fila.

En el siguiente ejemplo, usaremos 3 cajas que se convertiran en 3 columnas con el mismo alto, independientemente de su contenido. La explicación de como hacerlo se explica en el mismo HTML que hay a continuación.

Documento HTML

Esto es una caja

Este caja tiene menos contenido que la que está al lado, sin emabargo tienen la misma altura.


Esta es otra caja

Aquí tenemos más contenido que las otras. Si todas las cajas fueran celdas de la tabla, la celda con más contenido tendra la altura más grande. Y en una tabla todas las celdas de una misma fila siempre tendrán la misma altura. Esto funciona como un tabla, pero no lo es.

En su lugar, display: table, display: table-row y display: table-cell se utilizan para hacer que los divs se comporten como celdas de tabla. Excelente. No obstante, es soportado por los navegadores modernos, como Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, Internet Explorer 8 y Netscape.



Esta caja tiene mucho menos contenido, y podemos observar la alineación vertical del contenido..

Debemos recordar que tan solo es soportado por los navegadores modernos; Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, Internet Explorer 8 y Netscape

Documento CSS

.equal {
	display:table;
	border-collapse:separate;
}
.row {
	display:table-row;
}
.row div {
	display:table-cell;
}
.equal {
	margin:10px auto;
	border-spacing:10px;
	background:#898B60;
	width:80%;
}
.row div {
	background:#fff;
}
.row div.one {
	width:40%;
}
.row div.two {
	width:40%;
}
.row div.three {
	vertical-align:middle;
}

Ver ejemplo funcionando

Cada vez vamos viendo las facilidades y beneficios que nos aporta CSS ahora y en el futuro, esperemos que muy pronto podamos usar este tipo de propiedades para conseguir este tipo de cosas, sin tener que recurrir a opciones más complicadas de aplicar por culpa de que algunos navegadores no soporten ciertas propiedades. En este caso igualar la altura de distintos divs o cajas de distinto contenido.

Fuente: 456 berea street