Igualar tamaño de columnas con jQuery

Algunas veces nos topamos con el problema de que tenemos que igualar el tamaño de varias columnas que contienen diferente contenido, esto resulta fácil si el contenido es estático, bastaría con aplicarles un poco de CSS a las columnas y problema resuelto. Pero el problema viene cuando el contenido no es estático, sino, que es generado ya sea de la DB o algún otro recurso, debemos tener un mecanismo que establezca el mismo tamaño para todas las columnas sin importar el contenido de cada una.

Aquí hay una solución para este problema, algo sencillo, solo un poco de JavaScript (mediante jQuery claro).

Bastaría con esto:
Un poco de CSS para diferenciar las columnas:

#container {
	width:700px;
	margin:0 auto;
}

#container div {
	border:1px solid #ccc;
	width:316px;
	margin-right: 15px;
	float:left;
	background-color:#ddd;
}

Y el JavaScript:

$(function(){
	var maxH = 0;

	$("#container div").each(function(i) {

		var actH = $(this).height();
		if(actH > maxH) maxH = actH;

	});

	$("#container div").height(maxH);
});

DEMO

CompartirTwitter Facebook Google+ Pinterest LinkedIn Flipboard Delicious Addthis