Come mostrare un testo su 2, 3 o più colonne con HTML e CSS.

Come pubblicare dei contenuti di testo formattato anche con immagini e video suddivisi in 2, 3, 4 o più colonne usando solo HTML e CSS senza modificare modello o tema.

Alcuni modelli per Blogger e temi per Wordpress riprendono lo stile dei quotidiani cartacei più che di quelli online. In questi siti può essere interessante mostrare i nostri contenuti suddivisi in colonne soprattutto se si ha un'area del post piuttosto larga che permetta questa soluzione.

Ho già illustrato un metodo per suddividere il testo in più colonne ma si tratta di un sistema che presuppone di conoscere tutto ciò che va nelle singole colonne. Adesso voglio invece mostrare un sistema più evoluto che consente di dividere un testo in colonne senza preoccuparsi della sua lunghezza visto che questo avverrà in modo automatico. Dobbiamo solo impostare la larghezza totale del contenuto e la distanza tra le colonne. Possono anche essere inserite immagini o altri oggetti HTML.

SUDDIVIDERE IL CONTENUTO IN 2 COLONNE

Il codice da incollare in Modalità HTML è il seguente

<div style="width: 600px; -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count:2; -webkit-column-gap: 10px; -ms-column-count:2; -ms-column-gap: 10px; column-count: 2; column-gap: 10px; text-align:justify;">
      Codice del testo formattato da mostrare nelle due colonne
</div>

Il tag text-align:justify; è opzionale e serve solo per giustificare il testo che prenderà questo aspetto.

L'area del contenuto è stata settata in 600 pixel con una distanza di 10 pixel tra le due colonne. Si può anche semplicemente incollare il codice evidenziato di giallo subito prima e subito dopo il contenuto da mettere in colonna dopo che questo si sia già formattato per esempio con l'Editor di Blogger. 

SUDDIVIDERE IL TESTO IN 3 O PIÙ COLONNE

Per dividere il contenuto in 3 colonne si utilizza il codice 

<div style="width: 600px; -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count:3; -webkit-column-gap: 10px; -ms-column-count:3; -ms-column-gap: 10px; column-count: 3; column-gap: 10px; text-align:justify;">
      Codice del testo formattato da mostrare nelle due colonne
</div>

Il codice funzionerà su tutti i browser più importanti quali Chrome, Firefox, Internet Explorer e Safari. Per dividere il testo in 4 colonne basterà mettere 4 al posto di 3 e così via.

 

INSERIRE LINEE DI DIVISIONE TRA LE COLONNE

Si può anche personalizzare ulteriormente il nostro layout inserendo anche delle linee di divisione tra le varie colonne che possono essere continue, tratteggiate, punteggiate o doppie un po' come si fa con lo stile dei bordi. Il codice da usare con le stesse modalità per tre colonne è il seguente

<div style="width: 600px; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: 2px dashed #3422a3; -webkit-column-count:3; -webkit-column-gap: 10px; -webkit-column-rule: 2px dashed #3422a3; -ms-column-count:3; -ms-column-gap: 10px; -ms-column-rule: 2px dashed #3422a3;  -column-count: 3; column-gap: 10px; column-rule: 2px dashed #3422a3; text-align:justify;">
      Codice del testo formattato da mostrare nelle due colonne
</div>

dove oltre ai soliti parametri va personalizzato anche 2px dashed #3422a3; che inserirà un bordo dello spessore di 2 pixel, con il codice del colore di #3422a3 e in modo tratteggiato (dashed). 

Se si vuole delle linee continue al posto di dashed va messo solid mentre dotted serve per le linee punteggiate. Si possono usare anche i tag double, groove, ridge, inset e outset il cui significato lo lascio scoprire al lettore. Se si inseriscono immagini, video o altri oggetti HTML bisogna stare ovviamente attenti a che abbiano dimensioni inferiori alla largehzza di una singola colonna.