CSS: creare div della stessa altezza con display: table, table-row e table-cell

Quando si sviluppa un layout per un sito web, capita spesso di voler/dover usare dei div floatati all’interno di un altro div contenitore per creare un sistema “a colonne”.

ESEMPIO

Normalmente può capitare che una delle due o più colonne, abbia del contenuto in più rispetto all’altra o alle altre, e ci sono delle situazioni nelle quali questo può risultare veramente scomodo perché va a sballarci tutto il layout.

Che metodo dovremmo usare per far si che le colonne all’interno del nostro container, main o wrap che sia, si estendano in altezza in modo autonomo finché raggiungano le dimensione della colonna più lunga o più alta che dir si voglia??!!

Per questo ci vengono incontro i CSS3 con delle proprietà che vanno a simulare il comportamento delle classiche tabelle:

display: table;
display: table-row;
display: table-cell;

passiamo al nostro file CSS:

body {
  text-align: center;
}
 
#main {
  display: table;
  width: 960px;
  height: 100%; 
  min-height: 100%;
  border: 1px solid #000;  
  margin: 50px auto;
}
 
#row { 
  display: table-row;
  height: 100%;
}
 
#col_1 {
  display: table-cell;
  background: #ffc000;
  float: left;
  width: 470px;
  height: 100%;
}
 
#col_2 {
  display: table-cell; 
  background: #f00;
  float: right; 
  width: 470px; 
  height: 100%; 
}

adesso basta creare la struttura del nostro file html nel seguente modo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css: creare div dinamicamente della stessa altezza</title>
</head>
<body>
    <h1>Css: creare div dinamicamente della stessa altezza</h1>
    Ecco in azione <strong>display:table; display:table-row; display:table-cell;</strong>

    <div id="main">
        <div id="row">
            
            <div id="col1">
                <h2>Colonna 1</h2>
                <p>Questa colonna a meno contenuto della colonna 2, ma mantengono la stessa altezza</p>
            </div>
        
            <div id="col2">
                <h2>Colonna 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
            </div>
            
        </div>
    </div>
</body>
</html>