Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!-- 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:30% ; /* 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> 
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers