Impaginare testo su 2 colonne con i CSS

Questo ci potrebbe consentire di evitare l' utilizzo dei link qual' ora si volesse usare un' altra pagina web per contenere tutto lo scritto.

Impostazione della pagina

La nostra pagina di esempio sarà impostata nel seguente modo: un contenitore, la cui misura sarà espressa in px, che prende il nome di #container;
le "colonne" saranno create attraverso una classe; questo ci consente di richiamarla quante volte vogliamo nella stessa pagina. Nel nostro caso la implementeremo 2 volte. La classe prenderà il nome di .colonna.
Utilizzeremo un tag <H1> nella colonna, per simulare un titolo ed un tag generico <p>.
Questo è tutto quello di cui abbiamo bisogno per realizzare la nostra pagina. Adesso passiamo alla scrittura del codice.
Per prima cosa impostiamo margini, padding, font-family e misura del font e posizionamento centrale:

html, body{
margin:0;
padding:0;
font-family:Verdana, sans-serif;
font-size:90%;
text-align:center;
}

Adesso passiamo alla dichiarazione del codice del DIV container:

#container {
width:770px;
margin: 10px auto;
padding:0;
}

Unica cosa che vorrei far notare: margin: 10px auto; ci servono, come scritto sopra, per posizionare al centro pagina il contenitore. Adesso dichiariamo la classe .colonna:

.colonna {
width:370px;
padding: 0 5px;
float:left;
margin:0;
text-align:left;
}

Ho impostato una larghezza pari a 370 pixel; (370 x 2 = 740). Abbiamo ancora a disposizione 30 pixel, in larghezza, per non far vedere il testo nelle due colonne, tutto attaccato. Un padding laterale di 5 pixel per far "respirare" il testo contenuto nelle due colonne. Le colonne avranno una posizone "flottante" nella pagina; in questo caso a sinistra. Questo ci evita che vadano a finire una sotto l' altra. Il tag <H1> si riferirà prettamente alla colonna; il codice è:

.colonna h1{
margin:0;
padding:3px;
font-size:1.5em;
color:#980;
}

ed infine il tag <p>: con una "altezza" tra un rigo e l' altro pari a 1.6 em e giustificato:

p {
padding:3px;
text-align: justify;
line-height:1.6em;
}

Questo è tutto quello che ci serve per la nostra pagina divisa su due colonne. Il seguente link ci mostra l'esempio finale.