TROISIEME EXEMPLE DE 3 COLONNES ADAPTABLES EN HAUTEUR
NE MARCHE QUE DANS IE5.0 ET PLUS

flux normal de la page, avant le "tableau" CSS

 

Menu "Trois colonnes"

CODE CSS + HTML

<!-- Masque la DTD stricte à IE, sinon le script du "tableau" ne marche pas -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- ne sert qu'à Gecko-->
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { /* définition de la page */
  margin:0 ; /* marge extérieure */
  padding:0 }/* marge intérieure */

.container {/* encadre le tableau */
  width:100% ; /* largeur du tableau */
  height:1% ; /* hauteur minimale du tableau */
  margin:0 ; padding:0 ; /* marges intérieures et extérieures du tableau */
  border:3px solid black ;/* bordure du tableau */
  background-color:#E7E4E4} /* couleur fond du tableau (colonne droite en pratique) */

.gauche { /* définition de la colonne gauche */
  float:left ; /* flotte à gauche */
  width:24% ; /* largeur : 24% de .container */
  background-color:#FFD5AA ; /* couleur de la colonne */
  height:100% ; /* hauteur : 100% du .container */
  margin:0 ; padding:0} /* marges */

.centre {/* définition de la colonne centre */
  float:left ; /* flotte à gauche */
  width:50% ; /* largeur : 50% de .container */
  height:100% ; /* hauteur : 100% du .container */
  margin:0;padding:0 ; /* marges */
  background-color:#CCCCCC ; /* couleur de la colonne */
  border-left:3px solid black ; /* bordure gauche */
  border-right:3px solid black} /* bordure droite */

.droite { /* colonne droite */
  float:left ; /* flotte à gauche */
  width:23% ; /* largeur : 23% de .container */
  height:100% ; /* hauteur : 100% du .container */
  margin:0 ; padding-left:20px }/* marges */

.spacer { /* force au retour à la ligne après des fenêtres float */
  clear:both}

</style>
</head>

<body>

<p>Flux normal de la page, avant le "tableau" CSS</p>

<div class="container"> <!-- début du tableau -->

<div class="gauche">
  <p>Colonne de gauche</p>
</div>

<div class="centre">
  <p>Colonne du centre<p>
  <p>La colonne la plus longue n'a pas d'importance dans ce script</p>
  <p></p>
  <p></p>
</div>

<div class="droite">
  <p>Colonne de droite</p>
</div>

</div> <!-- fin container -->

<div class="spacer"></div>

<p>Flux normal de la page APRES le tableau CSS</p>

</body>
</html>

 

Pour tester ce script

 

Commentaires

Ce script est assez différent des 2 précédents. On place 3 boites float dans un container, et la boite la plus longue "pousse" vers le bas le bas du container. Comme on a réglé les boites du container à height:100%, elles s'adaptent toutes seules à la taille du container, c'est à dire à la colonne la plus longue.

Ce script à 3 avantages sur les 2 précédents :

- Chaque colonne a vraiment la même taille, ce n'est pas qu'une apparence.

- Il n'est pas nécessaire de connaître à l'avance la colonne la plus haute. Le système s'adapte tout seul.

- On peut définir une couleur différente pour chaque colonne.

Ce script a cependant un gros inconvénient : il ne passe que dans IE5.0 et supérieur pour windows (ne marche pas pour IE Mac). Il donne un résultat correcte mais pas parfait dans opéra. Le résultat est illisible dans les navigateurs Gecko (netscape 7, Mozilla,...), sauf avec une DTD stricte.

Ne marche par contre pas avec une DTD stricte dans IE. Il faut mettre une DTD transitionnal, ou masquer la DTD stricte à IE6 en la faisant précéder d'un commentaire . Ce petit bug de IE lui fait en effet ignorer une DTD suivant un commentaire.

Pour que cela passe partout à peu près (Gecko compris), il faut donc une DTD stricte précédé d'un commentaire la cachant à IE.

Ce script est à déconseiller, sauf si on n'utilise pas une couleur différente par colonne, si on sait que seul des gens sous IE viendront le voir (comme dans un intranet, par exemple) ou si on se contente d'un affichage un peu dégradé dans les navigateurs "alternatifs".

 

 

Flux normal de la page APRES le tableau CSS