Se devi dividere un'area in tre parti, conviene usare le %.
Pero` per poterlo fare, occorre che l'area da dividere abbia dimensoni definite.
Quindi la prima cosa da fare e` definire:
codice:
html, body {
width: 100%;
height: 100%;
}
Senza queste dichiarazioni tutto il resto del discorso non ha significato.
Poi si possono definire dei blocchi all'interno, che avranno altezza e larghezza 33%, e dovranno essere flottati (a sinistra):
codice:
.nono {
width: 33.3%;
height: 33.3%;
float: left;
}
A questo punto si possono definire i blocchi in questo modo:
codice:
<body>
<div class="nono">
alto sinistro</p></div>
<div class="nono">
alto centro</p></div>
<div class="nono">
alto destro</p></div>
<div class="nono">
medio sinistro</p></div>
<div class="nono">
medio centro</p></div>
<div class="nono">
medio centro</p></div>
<div class="nono">
basso sinistro</p></div>
<div class="nono">
basso centro</p></div>
<div class="nono">
basso destro</p></div>
</body>
Nota: se ci sono elementi intermedi (contenitori o altro) che si interpongono tra il <body> e i vari <div class="nono">, occorre che abbiano le dimensioni definite.
Se la cosa deve funzionare anche in IE6, occorre inserire degli hack, tipo quello proposto da oronze.
Per fare in modo che la cosa funzioni in tutti i browser, e` opportuno che la somma delle dimensino di ciascuna riga e colonna non raggiunga il 100%, ma resti qualche decimo inferiore; questo per evitare che a causa degli arrotondamenti si creino elementi che non ci stanno.
Rispondi quotando
