Torniamo sull’argomento del posizionamento dei blocchi <div> in una pagina html, perché è particolarmente sentito. Una volta un layout veniva disegnato facendo ricorso alle tabelle. Adesso con i css tutto è diventato estremamente più potente ed abbiamo strumenti prima assolutamente impensabili. Peccato che con le tabelle tutto fosse anche assolutamente semplice. Oggi, volete due blocchi con la stessa altezza ed allineati orizzontalmente e sotto di essi altri due con le stesse caratteristiche? Benvenuti all’inferno.
Ci è stato insegnato che i <div> sono elementi che per default si posizionano verticalmente così come i <p>, <ul> ecc. e quindi se vogliamo un immagine affiancata ad un altro blocco possiamo, per esempio, utilizzare la proprietà float: per posizionare l’immagine.
<div> <img src="drink_1.jpg" width="200" height="200" alt="" style="float: left;" /> <p>Questo è un drink</p> </div> <br> <div> <img src="food02d.jpg" width="200" height="200" alt="" style="float: left;" /> <p>Questo è un dolce</p> </div>
Bene, abbiamo racchiuso le due immagini + le relative descrizioni in una <div> sapendo che questi blocchi si dispongono verticalmente e abbiamo anche aggiunto un <br> pensando magari di separare i due blocchi.
Andiamo a vedere cosa succede e questo è il risultato:
Questo è un drink
Questo è un dolce
Sorpresa! Beh, se volete complicarvi la vita, usare il float è l’ideale. Per fortuna la soluzione è semplicissima.
In questi casi i blocchi non vanno separati da un <br>, ma occorre annullare il float. Questo può essere fatto inserendo una
<div style="clear:both;"></div>
tra una <div> e l’altra.
Il codice diventerà:
<div>
<img src="drink_1.jpg" width="200" height="200" alt="" style="float: left;" />
<p>Questo è un drink</p>
</div>
<div style="clear:both;"></div>
<div>
<img src="food02d.jpg" width="200" height="200" alt="" style="float: left;" />
<p>Questo è un dolce</p>
</div>
ed il risultato:
Questo è un drink
Questo è un dolce
