CSS: soluzione per i box di uguale altezza

CSS: soluzione per i box di uguale altezza

Andy Budd è uno dei più famosi esperti di CSS e di web design di sempre. Tra le soluzioni trovate da Andy durante la sua lunga carriera sul web c'è una tecnica molto semplice per ottenere l'effetto dei box di uguale altezza senza usare la proprietà height e senza usare JavaScript. Vediamola insieme.

Come saprete, alcune proprietà dei CSS accettano valori negativi. Nel box model CSS i margini possono avere valori negativi. Se tali valori vengono combinati con valori di padding che vanno nella stessa direzione, allora si ottiene l'effetto di un box la cui altezza viene calcolata in automatico (come sempre nel caso dei box fluidi) e allo stesso tempo si adatta ai contenuti del box stesso.

Avendo una serie di box di questo tipo:


<div class="wrapper">
	<div class="box">...</div>
	<div class="box">...</div>
	<div class="box">...</div>
</div>

Possiamo usare questo codice CSS:


.box {
	width: 250px;
	margin-right: 20px;
	float: left;
	padding: 20px;
}

.wrapper {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
}

.box {
	padding-bottom: 420px;
	margin-bottom: -400px;
	background: #89ac10;
	color: #fff;
	position: relative;
}

Come si può notare i valori di 420 e 400 pixel si compensano a vicenda, creando l'effetto dell'uguale altezza. Il segreto sta nel trovare dei valori proporzionali alla massima quantità di contenuto possibile e quindi adattarli alle esigenze dei vari layout.

Potete visionare l'esempio finale in questa pagina.

Torna su