Come allineare orizzontalmente più elementi DIV.

Come allineare orizzontalmente più elementi inseriti in singoli contenitori col tag DIV.

Smanettando con il modello o con il codice ci siamo spesso imbattuti nella necessità di allineare più elementi contenuti in un DIV sulla stessa linea retta orizzontale. Si potrebbe fare l'ipotesi di una serie di immagini inserite su una stessa linea orizzontale insieme alle loro descrizioni da essere visualizzate sotto ciascuna di esse. Se per inserire ciascuna immagine con descrizione usiamo un tag DIV ecco che le miniature appariranno in verticale e non allineate sulla stessa linea.

Questo perché il tag DIV comporta la creazione di un contenitore e quello successivo inserisce il nuovo contenitore con un salto di riga. Si può usare l'altro tag float:left; per allineare a sinistra due tag. Ma nel caso di più di due contenitori si hanno dei problemi con questo procedimento. Il tag float serve per spostare un elemento dal normale flusso per disporlo su uno dei due lati (float:left; o float:right;).

Per allineare dei contenitori sulla stessa linea orizzontale si può per esempio usare questo codice

<style type="text/css">div.allinea { float:left; margin-left:5px; }</style>
<div class="allinea" style="width:90px;height:90px;background-color:#ff00ff;">Primo DIV</div>
<div class="allinea" style="width:90px;height:90px;background-color:#ffff00;">Secondo DIV</div>
<div class="allinea" style="width:90px;height:90px;background-color:#00ffff;">Terzo DIV</div>
<div style="clear:both;" /></div>

che porta a questo risultato

Primo DIV

Secondo DIV

Terzo DIV

Il codice all'interno dei DIV è puramente dimostrativo. La riga <div style="clear:both;" /> è stata introdotta per impedire il posizionamento degli elementi su uno dei due lati. In sostanza si tratta di creare una classe allinea per poi fare in modo che gli elementi si posizionino uno accanto all'altro. Si può settare la distanza tra di essi attraverso il valore del margine sinistro.

Oltre a class si può usare anche il tag id  per personalizzare ciascun elemento in modo univoco. Un esempio di tre elementi DIV posizionati sulla stessa linea orizzontale potrebbe essere questo

<style type="text/css">
div.allinea { float:left; margin-left:10px; }
#colore1 {color:#003366; font-size:20px;}
#colore2 {color:#940F04; font-size:20px;}
</style>
<div class="allinea" id="colore1">Rosa Bianca</div>
<div class="allinea"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7VM0MyMTQyeO7RhG2amy86gUN0DMnhgOj3CT2OfuCh2GnSiLR0957RRe3z24UEqU8VAcNRbY98KDBPbVY2GA8oDlMNLfCTYnC22o1eu9DVBfmgKXjJ6tunLpIx77LHLhPpzl1vAxRyI/s1024/natura4.jpg" width="60px"/></div>
<div class="allinea" id="colore2">Molto richiesta</div>
<div style="clear:both;" /></div>

che porta a questo risultato

Rosa Bianca

Molto richiesta

Un tale codice può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure incollato in Modalità HTML in un post o in una pagina.