Il TronWeb è un laboratorio del Liceo Scientifico Tron.
Layout su più colonne
Per creare layout su più colonne, si usa la proprietà float.
Se vogliamo mantenere il layout centrato, dobbiamo racchiudere
i div colonna in un div wrapper, centrato con margin: auto;
#wrapper {
width: 910px;
margin: auto;
}
#menu {
float: left;
width: 150px;
min-height: 500px;
position: relative;
}
#content {
float: left;
width: 500px;
min-height: 500px;
position: relative;
}
#bio {
float: left;
width: 200px;
min-height: 500px;
position: relative;
}
Come si può notare, le colonne non si adattano in altezza. Per ovviare a questo problema, di solito si imposta uno sfondo per il div wrapper con il colore dei div laterali.
#wrapper {
background-color: #356AA0;
height: 100%;
}
Dato che i div con proprietà float non allungano il wrapper,
bisogna aggiungere in fondo un div vuoto con proprietà
clear: both;, il cosiddetto "clearer".
#clearer {
width: 100%;
clear: both;
}