Uno dei problemi che puntualmente si presenta nei nostri siti web è quello dell’altezza delle colonne che, se affiancate con un float come siamo soliti fare, possono avere altezze diverse a seconda del contenuto, vincolando di fatto il nostro cliente a dover inserire i contenuti visivi e testuali con un certo criterio per non compromettere la corretta visualizzazione del sito.
Per capirci una situazione molto comune è quella che vediamo nella figura sottostante e che può diventare deleteria nei device costringendoci ad applicare numerosi min-height nei breakpoints per tamponare (non risolvere) il problema.
Per aiutarci a risolvere questo problema senza l’ausilio di plug-in o Flex-box ci viene incontro il CSS con l’attributo/valore, che già abbiamo avuto modo di conoscere in un precedente articolo, display: table; che si presta in maniera rapida ed efficace a questa fastidiosa situazione.
Andiamo quindi a creare un nuovo esercizio, collegare un foglio di stile e compilare il seguente HTML:
Come da figura abbiamo realizzato 3 colonne con un numero di caratteri differente l’una dall’altra. Premuriamoci ora di fare in modo che tutte e 3 le colonne si adattino in altezza a quella col contenuto maggiore, andiamo pertanto a compilare il CSS come segue.
Con un principio facilmente comprensibile determiniamo che i nostri div affiancati sul modello Grid System siano celle del div contenitore che li contiene, in questo modo infatti possiamo avere un totale controllo sulla loro altezza a prescindere da quanto contenuto il nostro cliente deciderà di inserire.
Ricordiamoci infine che per una corretta visualizzazione mobile è necessario intervenire poi nelle Media Queries per modificare un paio di valori così che tutto calzi a pennello.
Niente di più semplice in una procedura che risulta perfettamente retrocompatibile e assolutamente utile alla causa in una problematica molto comune nel nostro lavoro di tutti i giorni.
Ancora nessun commento