Nella guida CSS di oggi vediamo come creare colonne con la stessa altezza indipendentemente dal contenuto utilizzando i CSS3 e la proprietà display: table.
[button link=”http://www.targetweb.it/tutorial/2013/colonne-stessa-altezza-css3/index.html” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://www.targetweb.it/download/2013/colonne-stessa-altezza-css3.zip” color=”blue” target=”blank” size=”large”]Download[/button]
Ammettilo, quante volte ti sei ritrovato a dover fronteggiare uno scenario di questo tipo:
Come vedete dando le due colonne, avendo contenuti differenti, di fatto non si adattano e risultano di due altezze differenti. Come fare a ovviare questo problema e rendere le due colonne perfettamente adatattate in altezza, anche con contenuto differente?
Per questo ci vengono incontro le proprietà CSS3 display:table – display:table-row; e display:table-cell;
Il funzionamento è piuttosto semplice, di fatto si usano i div come sorta di tabella formata da:
- Un div contenitore che funge da tabella principale a cui va associata la proprietà display:table;
- Un (o più) div “row” ovvero “di riga” che conterranno le nostre celle.
- Almeno due (altrimenti non avrebbe senso) div con proprietà table-cell, che avranno la stessa altezza pur avendo contenuti differenti.
Codice Html e CSS3 per creare le due colonne alla stessa altezza
Ecco la struttura HTML principale per le colonne:
<!--Demo Code -->
<div id="contenitore">
<div id="colrow">
<div id="colsx">
<h2>Colonna SX</h2>
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli</p>
</div><!-- Colsx-->
<div id="coldx">
<h2>Colonna DX</h2>
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>
</div><!-- ColDx-->
</div><!-- ColRow-->
</div><!-- Contenitore-->
Come potete notare:
- #Contenitore è il div principale che conterrà il nostro layout
- #ColRow è il div a cui applicare la row, ovvero la riga della nostra tabella
- #ColSx e #Coldx sono le nostre due table-cell ovvero le colonne che dovranno avere la medesima altezza.
Ecco nello specifico la “magia” CSS3:
#contenitore{display:table; width:100%; height:100%;min-width:100%;min-height:100%;}
#colrow{ display:table-row; height:100%; }
#colsx{ display:table-cell; background:red; float:left; width:50%; height:100%; }
#coldx{ display:table-cell; background:green; float:right; width:50%; height:100%; }
Come noterete non ho fatto altro che applicare le informazioni specificate nel primo paragrafo di questo articolo nel nostro CSS.
NOTA IMPORTANTE: se non specificate height:100% nel table-row le colonne non prenderanno la stessa altezza!
Risultato finale
[button link=”http://www.targetweb.it/tutorial/2013/colonne-stessa-altezza-css3/index.html” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://www.targetweb.it/download/2013/colonne-stessa-altezza-css3.zip” color=”blue” target=”blank” size=”large”]Download[/button]
Aggiornamento (05/05/2014)
Nelle nuove versioni di Chrome/Safari potreste incappare in un spiacevole bug, per evitare problemi usate il seguente codice/Fix:
<style>
#contenitore{display:table;}
#colrow{ display:table-row; width: 100%; }
#colrow > * {
display: table-cell;
border: 1px solid red;
vertical-align: middle; /*Fix Chrome/Safari */
}
</style>
<div id="contenitore">
<div id="colrow">
<div class="col">
<h2>Colonna SX</h2>
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli</p>
</div><!-- Colsx-->
<div class="col" style="background:blue;">
<h2>Colonna DX</h2>
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>
</div><!-- ColDx-->
</div><!-- ColRow-->
</div><!-- Contenitore-->
Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti o scrivi nei commenti!
