CSS: allineare i box in orizzontale con i soli margini

  • CSS
  • Gabriele Romanato

Bruno Fassino ha pubblicato un test in cui mostra come allineare i box in orizzontale usando i soli margini e senza floating. La sua tecnica funziona perfettamente con i box aventi altezza e larghezza dichiarate. Vediamola in dettaglio.

Partiamo dalla seguente struttura HTML:


<div id="wrapper">
	<div class="box left"></div>
	<div class="box center"></div>
	<div class="box right"></div>
</div>

Dobbiamo usare il margine superiore del secondo e terzo box con un valore negativo pari alla loro altezza, e il loro margine sinistro con un valore progressivo che tenga conto della loro larghezza:


#wrapper {
	width: 630px;
	height: 200px;
	margin: 2em auto;
}

div.box {
	width: 200px;
	height: 200px;
	background: gray;
}

.left {
	margin: 0;
}

.center {
	margin: -200px 0 0 210px;
}

.right {
	margin: -200px 0 0 420px;
}

Potete visionare l'esempio finale in questa pagina.

Torna su