CSS: box in evidenza con inline-block

Con l'uscita di Internet Explorer 8 è stata finalmente sancita la totale affermazione delle specifiche CSS 2.1. Tra le caratteristiche finalmente supportate anche da Explorer ci sono i box di tipo inline-block. Questo valore della proprietà display specifica che un box deve disporsi sulla stessa riga come un qualsiasi altro elemento inline, ma che la sua formattazione deve avvenire seguendo un contesto di tipo blocco. In altre parole, questo valore ci permette di fare a meno del floating per allineare i box su una stessa riga. Vediamo un'applicazione pratica di questa caratteristica creando dei box in evidenza.

Abbiamo questa struttura HTML:

<div id="content">
	<div class="featured first">...</div>
	<div class="featured">...</div>
	<div class="featured">...</div>
</div>

Vogliamo visualizzare questi primi tre box sulla stessa riga ponendoli in evidenza con stili speciali. Ecco come:

div.featured {
	width: 28%;
	display: inline-block;
	padding: 1em;
	background: #f90;
	border-radius: 10px;
}

div.featured h2 {
	font: 2em 'Arial Black', sans-serif;
	margin: 0;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 1px dotted #000;
	color: #fff;
	padding-bottom: 4px;
	
}

p.more-link {
	text-align: center;
}

a.more {
	padding: 0.3em 1.5em;
	background: #d34545;
	color: #fff;
	font-variant: small-caps;
	text-decoration: none;
	border-radius: 5px;
}

div.first {
	margin-left: 1.5em;
}

Tramite il valore inline-block i tre box si dispongono sulla stessa riga, ma vengono formattati come normali elementi di blocco. Potete visionare l'esempio finale in questa pagina.