CSS3 – Affichage par colonnes

LEÇON

 

Principes de base

L'affichage par colonnes à hauteur égale est compliqué en CSS car chaque élément s'étend, dans le sens vertical, uniquement la distance qu'il faut pour afficher son contenu.

Il est possible, bien sûr, de spécifier la hauteur d'un élément. Mais dans le contexte d'une page avec contenu dynamique (ou contenu autrement inconnu à l'avance) définir la hauteur des éléments peut être impossible.

 

Exemple

Imaginons qu'on veut un affichage à 2 colonnes, avec couleur de fond différente, et que les deux colonnes doivent avoir la même hauteur, l'une par rapport à l'autre, quelque soit leur contenu (leur contenu n'est pas connu à l'avance).

 

Donc on veut bien voir des pages comme celles-ci :

 

css_layout_deux_colonnes_ex1a

 

css_layout_deux_colonnes_ex1b

 

Mais on ne veut jamais voir des pages comme celles-ci :

 

css_layout_deux_colonnes_ex1c

 

css_layout_deux_colonnes_ex1d

 

css_layout_deux_colonnes_ex1e

 

css_layout_deux_colonnes_ex1f

 

css_layout_deux_colonnes_ex1g

 

css_layout_deux_colonnes_ex1i

 

Grosso modo donc, le problème est que le suivant n'existe pas :

 

.colonne-gauche
{
  height:au moins aussi grand que l'autre;
}
.colonne-droite
{
  height:au moins aussi grand que l'autre;
}

 

Pour résoudre ce problème, on va regarder deux méthodes populaires (il y en a d'autres) ...

 

Méthode 1 :

  • Peut être exploitée si on connaît la hauteur maximale d'au moins une des deux colonnes.

 

Principes :

  • on crée un conteneur pour les 2 colonnes
  • on exploite float:left et float:right pour pousser les colonnes à gauche et à droite
  • on fait en sorte que la largeur totale des 2 colonnes est égale à la largeur du conteneur
  • la couleur de fond pour la colonne à hauteur maximale connue est réutilisée pour la couleur de fond du conteneur
  • la hauteur maximale connue est réutilisée comme hauteur minimale de l'autre colonne
  • on met clear:both à la fin du conteneur

 

Désavantages :

  • ne marche pas dans le cas général où on ne connaît rien du tout sur l'ampleur du contenu des deux colonnes.
  • met beaucoup d'espace vide dans les deux colonnes dans le cas où celle avec la hauteur maximale connue n'exploite peu de l'espace prévu.

 

Exemple :

 

body
{
  margin:0;
  padding:0;
  background-color:black;
  font-family:Arial, Helvetica, sans-serif;
}

#wrapper
{
  width:960px;
  margin:0 auto;
  background-color:gray;
}

#column-right, #column-left
{
  padding:20px;
}

#column-right
{
  float:right;
  background-color:gray;
  width:330px;
}

#column-left
{
  float:left;
  width:550px;
  background-color:white;
  min-height:500px;
}

#footer
{
  clear:both;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2 colonnes</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

      <div id="wrapper">

        <div id="column-right">

          <p>
          Nulla volutpat hendrerit dui nec rutrum. Nulla sem leo, blandit dictum faucibus at, placerat ut velit. Vivamus nec efficitur quam. Sed cursus mi ut sagittis lobortis. Aenean finibus pulvinar augue eget aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue justo mi, sit amet semper est mattis nec. Duis a sollicitudin nibh, posuere consequat ex. Nunc viverra semper leo at vestibulum. Duis pellentesque mattis arcu eget dignissim. Cras aliquam leo sit amet augue malesuada vehicula. Maecenas augue massa, euismod sed varius non, sollicitudin non turpis.
          </p>

          <h4>
           Aliquam nec ultricies ex
          </h4>

          <p>
           Suspendisse potenti. Nunc lacus elit, dignissim eu aliquam nec, molestie vitae erat. Vivamus interdum sapien arcu, sed egestas justo faucibus vel. Nunc at rutrum eros. Praesent iaculis ante et venenatis tincidunt. Duis leo magna, bibendum quis urna id, rhoncus tincidunt risus.
          </p>

        </div>

        <div id="column-left">

          <h1>Vivamus interdum sapien</h1>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue justo mi, sit amet semper est mattis nec. Duis a sollicitudin nibh, posuere consequat ex. Nunc viverra semper leo at vestibulum. Nulla volutpat hendrerit dui nec rutrum. Nulla sem leo, blandit dictum faucibus at, placerat ut velit. Vivamus nec efficitur quam. Sed cursus mi ut sagittis lobortis. Aenean finibus pulvinar augue eget aliquam.
          </p>

          <p>
          Vivamus interdum sapien arcu, sed egestas justo faucibus vel. Nunc at rutrum eros. Praesent iaculis ante et venenatis tincidunt. Duis leo magna, bibendum quis urna id, rhoncus tincidunt risus. Ut vestibulum arcu nec mauris dictum, et volutpat augue hendrerit. Aenean mattis gravida enim aliquam tempus. Aenean a nibh erat. Duis pellentesque mattis arcu eget dignissim. Cras aliquam leo sit amet augue malesuada vehicula. Maecenas augue massa, euismod sed varius non, sollicitudin non turpis. Cras purus nunc, condimentum sed mattis egestas, placerat non orci. Aliquam nec ultricies ex. Suspendisse potenti. Nunc lacus elit, dignissim eu aliquam nec, molestie vitae erat.
          </p>

          <p>
          Nam non mauris non sem elementum volutpat vel in orci. Fusce venenatis, ligula sit amet placerat rhoncus, dolor leo bibendum lorem, sed blandit augue libero eget eros. Maecenas placerat lorem ante, sed viverra leo auctor et. Nullam interdum turpis eget nisl vestibulum, vel commodo enim ullamcorper. Nulla tempor sit amet risus ut lobortis. Nulla volutpat venenatis ornare. Morbi sit amet purus nec nisi varius vestibulum quis a leo.
          </p>

          <p>
          Morbi sit amet purus nec nisi varius vestibulum quis a leo. Nam non mauris non sem elementum volutpat vel in orci. Maecenas placerat lorem ante, sed viverra leo auctor et. Nullam interdum turpis eget nisl vestibulum, vel commodo enim ullamcorper. Nulla tempor sit amet risus ut lobortis. Nulla volutpat venenatis ornare.
          </p>

        </div>

        <div id="footer">
        </div>

      </div>

    </body>
</html>

 

Mini-exercice (méthode 1)

  • Reproduire les fichiers de l'exemple ci-dessus et ouvrir la page dans un navigateur.
  • Réduire la quantité de texte dans la colonne à gauche pour vérifier que la méthode marche dans le cas où il y a peu de texte à gauche.
  • Maintenant réduire aussi la quantité de texte dans la colonne à droite et remarquer les espaces vides (le désavantage de cette méthode).

 

 

Méthode 2 :

  • A exploiter dans le cas général où rien n'est connu sur les dimensions du contenu.

 

Principes :

  • Comme dans méthode 1 :
    • on crée un conteneur pour les 2 colonnes
    • on exploite float:left et float:right pour pousser les colonnes à gauche et à droite
    • on fait en sorte que la largeur totale des 2 colonnes est égale à la largeur du conteneur
    • on met clear:both à la fin du conteneur
  • Ce qu'on fait différemment :
    • plus de couleur de fond pour les colonnes
    • on utilise plutôt un fichier graphique pour le fond du conteneur - ceci met un "faux fond" sur les 2 colonnes
    • plus besoin de mentionner une hauteur minimale

 

Désavantages :

  • moins de souplesse pour la largeur des colonnes (besoin de manipuler le CSS et le fichier graphique dans le cas d'une modification de largeur).

 

Exemple (on peut utiliser le même fichier HTML que celui de méthode 1) :

 

body
{
  margin:0;
  padding:0;
  background-color:black;
  font-family:Arial, Helvetica, sans-serif;
}

#wrapper
{
  width:960px;
  margin:0 auto;
  background:white url(bg.jpg) repeat-y 50% 0;
}

#column-right, #column-left
{
  padding:20px;
}

#column-right
{
  float:right;
  width:330px;
}

#column-left
{
  float:left;
  width:550px;
}

#footer
{
  clear:both;
}

 

Mini-exercice (méthode 2)

  • Reproduire les fichiers de l'exemple ci-dessus et ouvrir la page dans un navigateur (voici l'URL pour l'image de fond).
  • Réduire la quantité de texte dans la colonne à gauche pour vérifier que la méthode marche dans le cas où il y a peu de texte à gauche.
  • Maintenant réduire aussi la quantité de texte dans la colonne à droite et remarquer qu'on n'a plus les espaces vides de méthode 1.

 

Remarques sur les 2 méthodes :

  • La seule différence entre les 2 méthodes est qu'on établit différemment la couleur de fond pour les 2 colonnes.
  • S'il n'y a pas de différence de couleur de fond - pas besoin d'utiliser ces méthodes.
  • Les 2 méthodes présentées exploitent la propriété float pour positionner les 2 colonnes mais on peut très bien utiliser position:absolute.
  • Théoriquement les 2 méthodes sont extensible vers 3 colonnes ou plus - mais en pratique méthode 2 est la plus adaptée pour les colonnes supplémentaire.

 


 

EXERCICES

 

1. Avec méthode 1, reproduire la page suivante. On présume que la hauteur maximale de la colonne à gauche (la section grise plus la section bleue) est connue.

css_colonnes_ex1

 

2. Avec méthode 2, reproduire la page suivante :

css_colonnes_ex2

 

3. Avec la méthode de votre choix, reproduire la page suivante (3 colonnes)  :

 

css_colonnes_ex3