Il posizionamento dei blocchi con html e css

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.

Quindi pensiamo di posizionare nella pagina un’immagine afiancata dalla sua descrizione e in una riga successiva un’altra immagine anch’essa affiancata dalla propria descrizione.

Potremmo scrivere:
	<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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *