CSS : Créer deux colonnes ayant toujours la même longueur

De nombreuses pages Web présentent du contenu sur deux colonnes, par exemple une colonne pour le contenu principal et une colonne pour le contenu secondaire. Dans le cas où les colonnes ont la même couleur de fond que le reste de la page, les colonnes seront faciles à mettre en place. Cependant, si les colonnes ont une couleur de fond différente, il faut utiliser une astuce pour assurer que leur longueur soit toujours identique, même si le contenu d'une colonne est plus long que celui de l'autre.

Deux astuces vous sont présentées ici.

▼Publicité

Astuce du margin et du padding sur les sous-divisions

Cette première astuce consiste à créer un margin négatif et un padding positif pour chacune des colonnes. La division qui entourera les deux colonnes aura un overflow: hidden qui assurera que les colonnes ne soient pas plus longues que nécessaire.

Ex :

HTML

<div class="zonecentrale">

    <aside class="zonesecondaire">

        <p>Texte de la zone secondaire</p>

    </aside>

    <section class="zoneprincipale">

        <p>Texte de la zone principale</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a posuere ipsum, at laoreet sem. Duis a accumsan diam, id euismod mi. Vivamus porta sapien tellus. Aenean molestie quis magna vel dapibus. Vestibulum ut magna sem. Donec ut dolor et ipsum malesuada cursus. Vestibulum est neque, tempor nec magna vehicula, scelerisque luctus augue. Vivamus vitae orci dictum, placerat augue eget, scelerisque orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in rhoncus ante. Nullam vulputate ligula a mi tempor laoreet. Cras vulputate dolor a augue aliquam, in sagittis lectus molestie. Mauris lacus mauris, tincidunt vel eleifend sit amet, fermentum vitae erat. Nullam a interdum ante, ac finibus orci. Cras ligula nibh, iaculis a felis vitae, varius ultrices dui.</p>

    </section>

</div>

<footer>

    Texte du pied de page

</footer>

CSS

.zonecentrale {

    background-color: #DCD2B6;   /* beige pâle */

    overflow: hidden;   /* Ceci assure que la division ne sera pas plus longue que ce que le contenu nécessite. */

                         /* L'astuce du margin et du padding sur les sous-div rend ceci obligatoire. */

}

 

.zoneprincipale {

    width: 77%;

    background-color: #4A99C2;   /* bleu */

    float: right;

    margin-bottom: -1000px;   /* astuce du margin et du padding pour que les deux divs aient la même longueur. */

    padding-bottom: 1000px;

}

 

.zonesecondaire {

    width: 22%;

    background-color: #AB916C;   /* beige */

    float: left;

    margin-bottom: -1000px;   

    padding-bottom: 1000px;

}

À ce stade, nous avons déjà les proportions souhaitées pour nos colonnes :

Colonnes de même longueur

Il faudrait ajouter du padding pour améliorer l'apparence. Mais puisque la taille des colonnes est spécifiée en pourcentage, nous ne pouvons pas ajouter le padding directement sur les colonnes. Nous allons plutôt ajouter une division dans chacune des colonnes. Ce sont ces divisions qui comporteront le padding.

Pour le footer, il n'est pas nécessaire d'ajouter une division intérieure puisque sa largeur n'est pas spécifiée en pourcentage.

Ex :

HTML

<div class="zonecentrale">

    <aside class="zonesecondaire">

        <div class="interieur">

            <p>Texte de la zone secondaire</p>

        </div>

    </aside>

    <section class="zoneprincipale">

        <div class="interieur">

            <p>Texte de la zone principale</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a posuere ipsum, at laoreet sem. Duis a accumsan diam, id euismod mi. Vivamus porta sapien tellus. Aenean molestie quis magna vel dapibus. Vestibulum ut magna sem. Donec ut dolor et ipsum malesuada cursus. Vestibulum est neque, tempor nec magna vehicula, scelerisque luctus augue. Vivamus vitae orci dictum, placerat augue eget, scelerisque orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in rhoncus ante. Nullam vulputate ligula a mi tempor laoreet. Cras vulputate dolor a augue aliquam, in sagittis lectus molestie. Mauris lacus mauris, tincidunt vel eleifend sit amet, fermentum vitae erat. Nullam a interdum ante, ac finibus orci. Cras ligula nibh, iaculis a felis vitae, varius ultrices dui.</p>

        </div>

    </section>

</div>

<footer>

    Texte du pied de page

</footer>

CSS

.zonecentrale {

    background-color: #DCD2B6;   /* beige pâle */

    overflow: hidden;   /* Ceci assure que la division ne sera pas plus longue que ce que le contenu nécessite. */

                         /* L'astuce du margin et du padding sur les sous-div rend ceci obligatoire. */

}

 

.zoneprincipale {

    width: 77%;

    background-color: #4A99C2;   /* bleu */

    float: right;

    margin-bottom: -1000px;   /* astuce du margin et du padding pour que les deux divs aient la même longueur. */

    padding-bottom: 1000px;

}

 

.zonesecondaire {

    width: 22%;

    background-color: #AB916C;   /* beige */

    float: left;

    margin-bottom: -1000px;   

    padding-bottom: 1000px;

}

 

.interieur {

    padding: 5px 15px;

}

 

footer {

    margin: 10px;

    text-align: center;

}

Et voilà le travail :

Colonnes de même longueur

Astuce de l'image de fond

Voici les principales étapes pour réaliser cette astuce :

  • Les deux colonnes doivent être englobées dans une division.

    Ex : dans le HTML :

    HTML

    <div class="zonecentrale">

        <section class="zoneprincipale">

            Texte de la zone principale

        </section>

        <aside class="zonesecondaire">

            Texte de la zone secondaire

        </aside>

    </div>

    <footer>

        Texte du pied de page

    </footer>

  • La division englobant les deux colonnes aura une image de fond représentant une « tranche » de l'écran composé des deux colonnes. Dans l'exemple illustré ici, l'image de fond sera la suivante (l'image a été redimentionnée pour pouvoir entrer sur cette page) :

    Exemple d'image de fond

    Ex : dans le CSS :

    CSS

    .zonecentrale {

        background-image: url("medias/commun/fondcentre.jpg");

        background-repeat: repeat-y;

    }

  • On n'aura pas à se soucier de la taille réelle des divisions de gauche et de droite. Seule la taille de la division englobante est importante car c'est elle qui donne l'illusion que les deux colonnes sont de même taille.
  • Pour assurer que la division centrale s'ajuste à la taille des divisions qu'elle contient, on doit utiliser une astuce supplémentaire. En effet, une division ne peut pas s'ajuster automatiquement à la taille de son contenu si ce contenu est composée de divisions flottantes (float:left ou float:right). On créera donc une troisième division qui n'apparaîtra pas à l'écran mais qui assurera que les divisions apparaissent comme désiré.

    Ex : dans le HTML :

    HTML

    <div class="zonecentrale">

        <section class="zoneprincipale">

            Texte de la zone principale

        </section>

        <aside class="zonesecondaire">

            Texte de la zone secondaire

        </aside>

        <div class="finzone"></div>

    </div>

    <footer>

        Texte du pied de page

    </footer>

    Dans le CSS :

    CSS

    .finzone {

        clear: both;

    }

Sans le clear: both, le pied de page pourrait ne pas apparaître correctement sous les divisions.

Pour plus d'information

« Comment créer des colonnes de hauteurs égales ? ». Le site du zéro. http://www.siteduzero.com/tutoriel-3-31163-comment-creer-des-colonnes-de-hauteurs-egales.html

« Why clear both CSS? ». Stack overflow. http://stackoverflow.com/questions/12871710/why-clear-both-css

« Equal Height Columns using CSS ». Ed Eliot. http://www.ejeliot.com/blog/61

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories