Spesso abbiamo la necessità di visualizzare gli elementi su due colonne, ma non vogliamo aggiungere altra marcatura per non complicare ulteriormente la nostra struttura HTML. In questo caso possiamo usare la proprietà CSS clear per avere soltanto due elementi per riga. Vediamo come.
Immaginiamo di avere questa struttura HTML:
<div id="content">
<div class="column-left"></div>
<div class="column-right"></div>
<div class="column-left"></div>
<div class="column-right"></div>
</div>
La proprietà clear impedisce ad altri elementi flottati di affiancarsi all'elemento flottato su cui è stata applicata. Quindi possiamo usare il floating in entrambe le direzioni e applicare questa proprietà a ciascun elemento:
div.column-left {
float: left;
clear: left;
width: 45%;
}
div.column-right {
float: right;
clear: right;
width: 45%;
}
E questo è il risultato:
[caption id="attachment_2787" align="aligncenter" width="527" caption="Gli elementi si dispongono su due colonne"]
[/caption]