jQuery: clear degli elementi posizionati

Se avete provato a realizzare un layout CSS usando il posizionamento vi sarete sicuramente accorti che è un vero problema posizionare il footer sotto le varie colonne. Questo problema deriva dal fatto che a meno che non dichiariate un altezza esplicita per il contenitore, il footer verrà sempre posizionato in alto sopra le colonne. Fortunatamente possiamo usare jQuery per risolvere il problema.

Abbiamo un layout a due colonne con footer che ha questa struttura:

<div id="content">

	<div id="left">...</div>
	<div id="right">...</div>
	
	<div id="bottom">...</div>
</div>

Le due colonne hanno altezza variabile e non possiamo sapere in anticipo quale sia la più alta. Gli stili CSS sono i seguenti:

#content {
	width: 40em;
	margin: 2em auto;
	position: relative;
}

#left {
	width: 50%;
	position: absolute;
	top: 0;
	left: 0;
	background: #ccc;
}
#right {
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	background: #ffffd0;
}

#bottom {
	width: 100%;
	padding: 0.5em 0;
	text-align: center;
	background: #c0c0c0;
	position: absolute;
	left: 0;
}

Con jQuery dobbiamo ottenere l'altezza delle due colonne, stabilire quale sia la più alta e quindi impostare la proprietà top dell'elemento bottom su quel valore:

$(function() {

	var leftHeight = $('#left').outerHeight();
	var rightHeight = $('#right').outerHeight();
	var top = Math.max(leftHeight, rightHeight);
	
	$('#bottom').css('top', top);
	

});

Il metodo max() dell'oggetto Math restituisce il valore più alto tra due numeri. I valori esaminati sono le altezze effettive delle due colonne. Potete visionare l'esempio finale in questa pagina.