MICHELEPISANI.IT
 

Allineamento orizzontale dei div in una pagina web

Allineare i DIV orizzontalmente

CSS - Allineare i DIV orizzontalmente
Febbraio 05
07:032014

Sfruttando la proprietà float è possibile allineare in orizzontale due o più div all'interno di una pagina web. I div sono dei contenitori e normalmente si allineano uno sotto l'altro occupando in larghezza tutta la dimensione possibile, se non diversamente specificato. La proprietà float fa in modo che la loro dimensione, sempre se non diversamente specificato, rispecchi esattamente lo spazio necessario che il contenitore occupa nella pagina permettendo così al contenitore successivo di scalare di posizione ed affiancarsi al precedente.

 

 
 
 
 
 
<div style="float:left; display:block; width:150px; height:150px; background-color:#F00; border: solid 1px #000"></div>
<div style="float:left; display:block; width:150px; height:150px; background-color:#FF0; border: solid 1px #000"></div>
<div style="clear:both;"></div>
 
 
Nell'esempio di cui sopra è chiaramente evidente il ruolo che gioca la proprietà "float:left", le altre proprietà dell'attributo style sono invece necessarie a scopo dimostrativo per l'esempio corrente in particolare "display:block" che afferma le dimensioni dei div date da width ed height che altrimenti verrebbero ignorate adattandosi al contenuto del div stesso; ed il background per distinguere i due blocchi.
 
Da notare invece il terzo div il cui attributo contiene la proprietà "clear:both", il cui scopo è quello di pulire le proprietà precedenti permettendo ad un eventuale successivo contenitopre di andare a capo e non allinearsi ai precedenti.
Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

4 Commenti

  1. Gabriele martedì 31 marzo 2015 alle ore 11.02

    Buono ma se io volessi centrare i 2 div al centro di un terzo contenitore?

    Rispondi a questo commento
  2. mario giovedì 2 febbraio 2017 alle ore 18.20

    Grazie, articolo veramente ben fatto ed esaustivo. Una domanda: per mantenerli affincati in visualizzazione desktop va benissimo questo codice, ma in visualizzazione per farli traslare uno sopra ed uno sotto cosa devo fare? in pratica lato pc va benissimo che si vedano affiancati ma su mobile vorrei che traslassero uno sotto per l'atro, per una migliore visualizzazione. Grazie mille

    Rispondi a questo commento

Scrivi un Commento

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

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao alessandro,
questa regex dovrebbe fare al caso tuo:

alessandro

ciao sto cercando una regex per numeri interi o decimali, positivi o negativi; la tua regex mi pare …

Michele Pisani

Ciao Nicola,
ti riferisci per caso alla situazione di gianluigi?
In tutti i casi la via …

Nicola

Ciao Michele, mi trovo nella medesima situazione in cui si trovava Gianluca un anno fa. Sei poi …