Creare colonne della stessa altezza con i CSS3

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:

situazione-start-colonne

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

final-result-colonne-css3

[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!

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

colorare-testo-placeholder-con-css3
Up Next:

Come cambiare colore al testo dei placeholder con i CSS3

Come cambiare colore al testo dei placeholder con i CSS3