Creare dei Box flottanti (elemento float)
Iniziamo con spiegare cosa fa la proprietà float.
Gli elementi a cui viene assegnata, vengono estratti dal normale flusso degli elementi della pagina e posizionati a destra o a sinistra rispetto al loro elemento contenitore.
Nonostante non seguano le normali regole di impaginazione, la loro presenza viene percepita dagli elementi che li circondano, che si regolano di conseguenza. Facciamo un esempio per capire meglio:
Come possiamo vedere abbiamo un div contenitore
<div class="container"></div>
a cui abbiamo attribuito un padding interno di 10 pixel per distanziare gli elementi contenuti, dall’elemento contenitore
.container{
padding: 10px;
}
e abbiamo definito la sua larghezza e la sua altezza. Fate ben attenzione all’altezza, indispensabile per una corretta visualizzazione. Gli elementi flottanti infatti, non vengono considerati come contenuto e quindi non ridimensionano automaticamente il box contenitore. Si può ottenere un effetto simile inserendo del contenuto non flottante all’interno del box contenitore.
.width150{
width: 150px;
}
.height50{
height: 50px;
}
E sei piccoli box, tre a cui abbiamo attribuito un float: left;
<div class="floatleft"></div>
.floatleft{
float: left;
}
e tre a cui abbiamo attribuito un float: right;
<div class="floatright"></div>
.floatright{
float: right;
}
A cui abbiamo combinato un po’ di margini
.marginbottom1-0{
margin-bottom: 10px;
}
.marginleft1-0{
margin-left: 10px;
}
Combinando il tutto, questo è il codice
<div class="container width150 height50"> <div class="floatleft marginbottom1-0">1</div> <div class="floatleft marginbottom1-0 marginleft1-0">2</div> <div class="floatleft marginbottom1-0 marginleft1-0">3</div> <div class="floatright marginbottom1-0 marginleft1-0">4</div> <div class="floatright marginbottom1-0 marginleft1-0">5</div> <div class="floatright marginbottom1-0 marginleft1-0">6</div> </div>
Qui ne potete vedere l’applicazione, nella quale ho aggiunto dei bordi neri per far meglio capire la struttura.
Il codice originale, senza bordi, lo trovate qui, in .rar pronto per il dowload.
Articoli correlati
Iscriviti ai Feed RSS 2.0 di quest'articolo.