Vedremo brevemente come sia possibile ottenere una sezione composta da un'immagine,
un titolo e un paragrafo. Questa soluzione può essere adottata per esempio per
news accompagnate da immagini o per descrivere prodotti commerciali.
Ecco il codice HTML minimale:
<div class="textimage">
<img src="layout.jpg" alt="">
<h2>Layout</h2>
<p>Qui il testo...</p>
<div class="clearer"> </div>
</div>
Ed ecco il foglio di stile:
div.textimage{
width: 400px;margin-bottom: 10px;
border: 1px solid #000;background-color: #eee
}
div.textimage img{
float:left;
margin: 10px
}
div.textimage h2, div.textimage p{
margin:0 10px;
padding: 0
}
div.textimage h2{
margin-top: 10px
}
div.clearer{clear: left}
Ecco il risultato.
Il meccanismo è questo: l'immagine viene resa float e distanziata dai bordi del
suo contenitore con l'uso dei margini. Vengono impostati i margini del paragrafo
e del titolo e il resto viene sistemato di conseguenza. L'uso del div con classe
clearer non ha motivo strutturale ma solo di presentazione: nel caso in
cui il testo sia troppo corto e non riesce a coprire l'altezza dell'immagine è
necessario contenere il float. La tecnica usata qui è presentata da Eric
Meyer nell'articolo Containing
float.
Questo esempio, immerso nella colonna centrale di un layout con i float, può
risultare disastroso per l'uso del clear. Come evitare problemi? In questo caso
si può ad esempio fissare l'altezza del contenitore, avendo cura di controllare
che il testo ci stia. Sarà però necessario dimensionare testo e altezza del contenitore
in maniera concorde: per il testo ridimensionabile, entrambi andranno dimensionati
in em, oppure in maniera più sicura e semplice sarà possibile renderli fissi e
dimensionarli in pixels.