CSS: layout multi-colonna con float



Molte pagine web utilizzano più colonne nella propria struttura. Ciò si ottiene usando un elemento <div> per ciascuna colonna.

Occorre anche definire una classi per il <div> di ciascuna colonna e le relative caratteristiche. Occorre specificare queste informazioni nel file CSS.

Nel file CSS indicheremo anche la lunghezza dalla pagina, dei paragrafi, che font intendiamo usare e l'allineamento che volgliamo usare per i titoli. Occorre altresì specificare l'immagine o il colore dello sfondo della nostra pagina web.

Occorre anche definire le classi per i div che intendiamo usare e le relative caratteristiche. Quindi definire i menù di navigazione delle pagine, i pulsanti e ogni elemento che intendiamo usare nella pagina web. Con il file CSS possiamo definire lo stile di qualunque elemento inseriamo nella nostra pagina web.

Facciamo ora l'esempio del codice HTML di una semplice pagina web con layout multi-colonna con float:

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Elenco Tutorial</title>

<style type="text/css">

body {
  width: 950px;
  font-family: Arial, Verdana, sans-serif;
  color: #665544;
  margin: auto;
  }
h1 {
  background-color: #efefef;
  margin: 20px 0 20px;
  padding: 15px;}
h2  {
    text-align: center;
    padding: 5px;}
p{
    width: auto;
    margin: 0px;
    }
hr { 
  border: 0;
  width: 100%;
  color: #000000;
  background-color: #000000;
  height: 1px;
  }  
#menu ul {
    padding: 0;
    margin: 0;
    z-index: 1000;}

#menu li {
    position: relative;
    float: left;
    width: 190px;
    text-align: center;
    list-style: none;
    }
#menu li a {
    background-color: #454545;
    color: #FFF;
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    }
#menu li a:hover {
    background-color: #0186ba;
    text-shadow: 0px 0px 1px #FFF;
    }
#menu ul ul {
    position: absolute;
    top: 48px;
    visibility: hidden;
    }
#menu ul li:hover ul {
    visibility: visible;
    }
#menu ul ul:hover {
    box-shadow: 0px 20px 30px #7C7C7C;
    }
#menu ul ul li a {
    background-color: #3A3A3A;
    }
#menu ul ul li a:hover {
    background-color: #0186ba;
    }
.vertical-menu {
    width: 430px; /* Set a width if you like */
    margin: 0 auto;
    }

.vertical-menu a {
    background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
    }

.vertical-menu a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
    }

.vertical-menu a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: white;
    }

.column1of2 {
  float: left;
  width: 455px;
  margin: 10px;}
.column2of2 {
  float: left;
  width: 455px;
  margin: 10px;}
  
</style>

</head>

<body>
<h1 align='center'>Elenco Tutorial</h1></p>

<div id="menu">
        <!-- Lista generale -->
        <ul>
            <!-- 1° Elemento   -->
            <li><a href="#">Punto Informatico</a></li>
            <!-- 2° Elemento -->
            <li><a href="#">Texbuntu tutorial</a></li>
            <!-- 3° Elemento: (Sottomenu) -->
            <li><a href="#">LyX tutorial</a>
                <ul>
                    <li><a          href="#">LyX</a></li>
                    <li><a href="#">Tutorial</a></li>
                    <li><a href="#">Homepage LyX</a></li>
                </ul>
            </li>       
            <li><a href="#">Markdown tutorial</a></li>
            <li><a href="#">Html tutorial</a></li>
            </ul>
</div>
<br>
<br>
<br>
<br>

<div class="column1of2">
<h2> LyX </h2>

<p align='justify'> LyX è un word processor multi-piattaforma open source che potete usare con linux, Windows o col Mac.
E' uno dei programmi più usati dagli studenti all'università per scrivere le tesi. Questo perché oltre a permettere
di fare lavori di impaginazione all'altezza di lavori professionali consente di risparmiare molto tempo. </p>

</div>

<div class="column2of2">
<h2> Immagina </h2>
<p align='justify'> Immaginate poter scrivere un documento come un libro o una lunga tesi divisa in capitoli, sezioni
e sottosezioni. Poi si dice al programma di creare l'indice e lui lo crea. Da solo crea l'indice indicando i numeri di
pagina e se in seguito noi andiamo a modificare il nostro documento lui aggiorna l'indice automaticamente.
Potete immaginare che bel risparmio di tempo non dover creare l'indice manualmente e non doverlo aggiornare manualmente
per ogni modifica che noi facciamo al documento.</p>

</div>

</body>

</html>

Il risultato lo potete vedere qui.