Come separare in due colonne il testo con il linguaggio CSS

Il linguaggio CSS consente di separare il contenuto di una pagina in colonne. Il risultato si ottiene usando il tag DIV ed è simile a quello ottenibile con il tag TABLE del linguaggio HTML.

Perché fare in CSS quello che si può fare in HTML?

I fogli di stile hanno potenzialità superiori e sono più flessibili. Con il linguaggio CSS è possibile raggiungere un'organizzazione contenutistica della pagina altrimenti impossibile da realizzare con il linguaggio HTML.

Un esempio pratico di colonne affiancate

Il codice CSS delle colonne

Il seguente codice sviluppa una classe per realizzare delle colonne affiancate a sinistra ( float: left ) tra loro. Ogni colonna ha una larghezza pari al 45% dell'area ( width:45% ). Alla classe è assegnato il nome 'colonne'.

div.colonne div{
float: left;
width: 45%;
padding: 5%
}

In una superficie possiamo mostrare due colonne, in quanto ciascuna colonna occupa il 45% della larghezza dell'area. Il 10% restante di spazio è dedicato ai margini dentro le colonne ( padding ).

Il codice CSS del contenitore

Per visualizzare le colonne è necessario definire la larghezza totale dell'area. Aggiungiamo un'altra classe con la funzione di contenitore con larghezza pari al 100%. Alla nuova classe assegniamo il nome 'contenitore'.

div#contenitore{
width: 100%;
font: arial;
}

Utilizziamo quest'ultima classe per definire il font del carattere ( Arial ) in questo modo evitiamo di doverlo specificare su ogni singola colonna.

Il codice HTML

Dopo aver definito le classi "colonne" e "contenitore" nel foglio di stile, possiamo richiamarle dalla sezione body del documento HTML.

Ad esempio, nel seguente codice HTML la classe 'contenitore' è richiamata dal primo tag DIV, quello più esterno che si estende al 100% della larghezza disponibile. Al suo interno è annidata la classe 'colonne' in un altro DIV.

<div class="contenitore">
<div class="colonne">
<div>colonna 1 </div>
<div>colonna 2</div>
<div></div>
</div>
</div>

Alla colonna 1 e alla colonna 2 è assegnata una larghezza pari al 45% dello spazio disponibile. Il restante dello spazio è assegnato all'ultimo div, quello privo di contenuti che sarà visualizzato più a destra.

Il risultato finale sul browser

Il risultato finale sul browser è il seguente:

COME SEPARARE LE COLONNE

In questa organizzazione della pagina i contenuti sono separati tra loro in due colonne distinte e affiancate tra loro. L'effetto grafico è ottenuto grazie alla presenza della proprietà "float: left" della classe 'colonne'.

Come invertire l'ordine delle colonne?

Per invertire l'ordine di presentazione delle due colonne è sufficiente modificare il parametro "left" in "right", senza dover spostare fisicamente la posizione del contenuto del testo nel documento HTML.

Quali sono i vantaggi del foglio di stile

  1. Il linguaggio CSS modifica l'aspetto di una pagina senza modificare il suo contenuto testuale.
  2. Con una modifica al foglio di stile si modificano automaticamente tutte le pagine del sito web che lo usano e non una sola.
 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base
  1. Cos'è il CSS