Comment avoir plusieurs balises <div> automatiquement de la même hauteur en fonction du contenu qui prend le plus de hauteur dans l'une des balises <div> ?

Et ceci, sans tableau, et fonctionnant sur tous les navigateurs ?

Les 3 colonnes de départ

Code HTML

<div id="col1" class="sameHeightCol">Colonne 1</div>
<div id="col2" class="sameHeightCol">Colonne 2<br/>contenu supplémentaire</div>
<div id="col3" class="sameHeightCol">Colonne 3</div>

Code CSS

<style type="text/css">
    .sameHeightCol {
        float: left;
        position: relative;
    }
    #col1 {
        width: 45%;
        background: green;
    }
    #col2 {
        width: 30%;
        background: yellow;
    }
    #col3 {
        width: 25%;
        background: red;
    }
</style>

Rendu

Les 3 colonnes avec automatiquement la même hauteur que la balise <div> la plus haute

Voici l'astuce utilisée :

Code HTML

<div id="container1" class="sameHeightCol">
    <div id="container2" class="sameHeightCol">
        <div id="container3" class="sameHeightCol">
            <div id="col1" class="sameHeightCol">Colonne 1</div>
            <div id="col2" class="sameHeightCol">Colonne 2<br/>contenu supplémentaire</div>
            <div id="col3" class="sameHeightCol">Colonne 3</div>
        </div>
    </div>
</div>

Code CSS

<style type="text/css">
    .sameHeightCol {
        float:left;
        position:relative;
        overflow:hidden;
    }
    #container1 {
        width: 100%;
        background: green;
    }
    #container2 {
        width: 100%;
        right: 25%; /* = la largeur de la colonne verte */
        background: yellow;
        overflow: visible;
    }
    #container3 {
        width: 100%;
        right: 30%; /* = la largeur de la colonne jaune */
        background: red;
        overflow: visible;
    }
    #col1, #col2, #col3 {
        left: 55%; /* = #container2{right} + #container3{right} */
    }
    #col1 {
        width: 45%; /* = #container1{width} - #col1{left} */
    }
    #col2 {
        width: 30%; /* = #container3{right} */
    }
    #col3 {
        width: 25%; /* = #container2{right} */
    }
</style>

Rendu


 

Rajouter un padding dans les colonnes

Il faut rajouter une balise <div> qui entoure le contenu et lui donner le padding voulu.

Code HTML

<div id="container1" class="sameHeightCol">
    <div id="container2" class="sameHeightCol">
        <div id="container3" class="sameHeightCol">
            <div id="col1" class="sameHeightCol"><div class="myPadding">Colonne 1</div></div>
            <div id="col2" class="sameHeightCol"><div class="myPadding">Colonne 2<br/>contenu supplémentaire</div></div>
            <div id="col3" class="sameHeightCol"><div class="myPadding">Colonne 3</div></div>
        </div>
    </div>
</div>

Code CSS à rajouter

    .myPadding {
        padding: 15px;
    }

Rendu

 

Avoir une colonne centrée de largeur fixe

Code HTML

<div id="container1">
    <div id="container2">
        <div id="container3">
            <div id="colCentered">
                Ma colonne centrée avec une largeur fixe
            </div>
        </div>
    </div>
</div>

Code CSS

<style type="text/css">
    #container1 {
        position: relative;
        width: 100%;
        background: yellow;
        height: 100%;
        float: left;
        overflow: hidden;
    }
    #container2 {
        position: relative;
        background: green;
        width: 100%;
        right: 50%;
        float: left;
    }
    #container3 {
        float:left;
        position:relative;
        overflow:hidden;
        width: 100%;
        left: 50%;
    }
    #colCentered {
        margin: 0 auto;
        width: 300px;
        background: red;
        position: relative;
    }
</style>

Rendu

 

Plus d'infos (en anglais)