Come dividere il testo di una pagina o di un post in 2, 3 o 4 colonne.

Come suddividere il testo di un articolo, o anche una sua parte, in due, tre o quattro colonne usando solo i CSS e HTML.

I giornali sono abituati da sempre a dividere i propri contenuti in colonne. Questa consuetudine risale ai tempi in cui i quotidiano assomigliavano a dei veri lenzuoli e quindi la suddivisione dei contenuti in colonne rispondeva a una precisa esigenza pratica. Questo tipo di impaginazione è rimasta anche dopo l'avvento del formato tabloid che ha rimpicciolito di molto la larghezza del classico foglio. Solo adesso con le edizioni online si va in qualche modo a ridimensionare l'utilizzo delle colonne.

Ci sono molti modelli anche di Blogger che si rifanno al layout dei giornali e che presentano soprattutto la homepage suddivisa in colonne. Vediamo come sia possibile suddividere tutto il testo di un articolo, di una pagina statica o anche solo una sua parte in due, tre o anche quattro colonne.

COME SUDDIVIDERE IL TESTO IN DUE COLONNE

In questo caso si va nell'Editor di Blogger in Modalità HTML e si incolla il seguente codice

<div style="float: left; text-align: justify; width: 47%;">
Testo da visualizzare nella prima colonna</div>
<div style="float: right; text-align: justify; width: 47%;">
Testo da visualizzare nella seconda colonna</div>
<div style="clear: both;">
</div>

Dove la percentuale del 47% può essere aumentata o diminuita per lasciare più o meno spazio tra le colonne. Il risultato sarà simile a questo

COME SUDDIVIDERE IL TESTO IN TRE COLONNE

In quest'altro caso dobbiamo fare due divisioni. Poniamo di avere per semplicità un layout di 900 pixel. Nella prima divisione con i CSS creeremo una colonna da 285 pixel e una da 580 pixel. Successivamente divideremo in due quella da 580 pixel usando un codice simile a quello precedente. Avremo tre colonne di circa 285 pixel. Si va come sempre in Modalità HTML e si incolla un codice come il seguente

<style type="text/css">
#col1 {
width: 260px;
float: left;
text-align:justify;
}
#col2 {
width: 600px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<div id="col1">
Testo da visualizzare nella prima colonna.</div>
<div id="col2">
<div style="float: left; width: 47%;">
Testo da visualizzare nella seconda colonna.</div>
<div style="float: right; width: 47%;">
Testo da visualizzare nella terza colonna.</div>
<div style="clear: both;">
</div>
</div>

dove i valori delle larghezze e le percentuali di suddivisione della seconda e terza colonna devono essere calibrate in funzione del layout della pagina. Si otterrà un risultato come questo

COME SUDDIVIDERE IL TESTO IN QUATTRO COLONNE

Stavolta divideremo il layout in due parti con i CSS e ciascuna parte sarà a sua volta divisa in due con l'HTML. Nell'Editor di Blogger si dovrà incollare quindi questo codice

<style type="text/css">
#col11 {
width: 430px;
float: left;
text-align:justify;
}
#col21 {
width: 430px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<<div id="col11">
<div style="float: left; width: 47%;">
Testo della prima colonna.</div>
<div style="float: right; width: 47%;">
Testo della seconda colonna.</div>
<div style="clear: both;">
</div>
</div>
<div id="col21">
<div style="float: left; width: 47%;">
Testo della terza colonna.</div>
<div style="float: right; width: 47%;">
Testo della quarta colonna.</div>
<div style="clear: both;">
</div>
</div>

con le solite raccomandazioni riguardo alla personalizzazione dei parametri in rosso e blu. Il risultato sarà molto simile al seguente screenshot

Al posto di Testo della prima, seconda, terza e quarta colonna non è detto che ci debba essere solo semplice testo ma ci può anche essere formattazione che includa parole di diverso colore, famiglia di font, corsivo, grassetto e dimensione di carattere così come la presenza di collegamenti. In questo caso conviene creare prima il testo formattato con un qualsiasi Editor Wysiwyg quindi andare su HTML e copiare ciascuna parte di codice nella colonna in cui vogliamo che venga visualizzato. Concludo osservando che questo hack  funziona in tutte le piattaforme e in qualsiasi pagina web.