Affiancare elementi blocco con altezze differenti

Il problema! Uno dei grandi problemi di noi WebDesigner è sempre stato quello di dover affiancare elementi blocco di differenti […]
Affiancare elementi blocco con altezze differenti

Il problema!

Uno dei grandi problemi di noi WebDesigner è sempre stato quello di dover affiancare elementi blocco di differenti altezza. L’esempio potrebbe essere quello di una normalissima lista nella quale si susseguono più elementi affiancati l’uno all’altro. L’unica proprietà (a parte il position) che consente di affiancare due elementi blocco estraendoli dal normale flusso del documento è proprio il float, che però, come in questo caso, comporta non pochi problemi. Per capire subito di cosa sto parlando dai un occhio alla demo prima di proseguire nella lettura!.

Un esempio concreto da analizzare

Per concretizzare più nel dettaglio, osserviamo il comportamente di alcuni elementi flottanti rappresentati graficamente nell’immagine seguente e poniamoci insieme qualche domanda!

floating

Analisi della metodologia float per affiacare elementi blocco.

Perchè il terzo elemento della lista cade?
Come da precedente figura l’elemento padre non è abbastanza ampio da poter contenere tutti gli elementi della nostra lista. Un elemento flottante non puà mai sporgere al di la del limite sinistro o destro del suo elemento contenitore (regola che è stata aggiunta solo nel livello 2) per fare in modo che automaticamente un box flottante vada a capo in assenza di spazio.

Perchè il terzo elemento, cadendo, si posiziona come in figura e non sotto il primo elemento?
Considerando i nostri 3 elementi, devi sempre ricordare che il limite esterno sinistro di un elemento che flotta (3) si troverà sempre a destra del limite esterno destro di un elemento fluttuante che si trova gia li (1) a meno che la parte superiore di (3) si trovi sotto la parte inferiore del (2). In poche parole un elemento fluttuante non può mai sovrapporsi ad un altro elemento fluttuante che si trova li gia in precedenza ed ecco perchè il terzo elemento, non avendo più spazio va a cadere e si va a posizionare affianco al primo elemento. In piu ricorda che un elemento fluttuante si posiziona sempre nel punto piu alto possibile ed in questo caso il punto piu alto possibile, considerando il precedente enunciato è proprio in corrispondenza del limite inferiore del secondo elemento. Se sei confuso, rileggi il tutto aiutandoti con carta e penna. E’ un metodo infallibili che utilizzo sempre anche io per capire meglio cosa sto leggendo!

La soluzione al problema

La proprietà Inline-Block
Vuoi mantenere l’altezza originale di ogni “li” per non tagliare via nulla ma garantendo al contempo un allineamento corretto? La soluzione è senza dubbio quella di non ricorrere al float ma di settare il display degli elementi su inline-block. Cosi facendo, potrai gestire facilmente anche l’allineamento verticale che in questo caso conviene, per motivi estetici, impostare su top.

.elements{
    display:inline-block;
    vertical-align:top;
    width:300px;

    /* Cross Browsing. Fix per IE6 e IE7 */
    *display:inline;
    zoom:1;
}

Nota bene…

Abbiamo deciso, dietro osservazione di Gabriele nei commenti, di aggiungere la porzione di CSS per rendere lo script cross-browser (la demo già lo era). Effettivamente il tutto non era chiarissimo e non saltava bene all’occhio il link che avevo riportato che comunque ti spiegava nel dettaglio in cosa consista la proprietà inline-block. Ti rimando lo stesso a quest’articolo per un’analisi più approfondita.!

Grazie per la collaborazione e scusate per la poca chiarezza!

Provalo subito

Prova la demo Consulta il codice
  • Bell’articolo Stefano,
    è un piacere leggere questi articoli nel panorama dei blog italiani dedicati al web design. Sempre più blog parlano di niente e non affrontano veramente argomentazioni utili.
    Sarebbe sicuramente interessante vedere questa soluzione anche in versione cross-browser.

  • Ciao Gabriele, grazie mille per i complimenti. Si si, è giustissima la tua osservazione sul cross-browsing e in effetti, nel nota bene a findo articolo , ho linkato un precedente articolo sulla proprietà inline-block cross browser in cui viene spiegato come ottenere lo stesso effetto anche su browser datati come IE6… in piu la demo, se analizzi il codice è gia stata resa cross browser cosi da poterla scaricare e riutilizzare!!!

    Davvero grazie per i complimenti e per il sostegno a nome mio e di Antonio.

    A presto ciao

    per qualsiasi dubbio siamo qui!!!

  • Grazie per le precisazioni Stefano.
    Non avevo notato che era già presente il link alla soluzione cross-browser 🙄

  • Pingback: Una thumbnail gallery in HTML, CSS e jQuery | Laboratorio CSS()

  • Ottimo!

  • Finalmente un articolo ben scritto e che tratta di qualcosa effettivamente utile!Bravo Stefano e grazie per le info utilissime!!!

    • Grazie Riccardo, fa sempre piacere ricevere commenti del genere. Gli articoli sul box-model e sulle nozioni base in generale sono sempre belli da affrontare, poi ci sono anche le “figaggini” in CSS3 ma se la struttura alla base non è solida crolla tutto. Grazie ancora.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github