Cette zone est totalement libre, et a une hauteur indéfinie : c'est le déroulement de la page normale. Elle repousse le "tableau" CSS qui est dessous.
Il s'agit d'un exemple très proche du précédent, même si l'apparence diffère un peu. On a simplement supprimés les en-tête et en-pied, qui sont remplacés par le corps normal de la page.
Ici aussi, la colonne qui n'est pas en position:absolute doit être la plus longue.
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {padding:10px} /* crée un espace autour de la page (pour
faire joli)*/
.container {
background-color: #E7E4E4 ; /* couleur de fond (donc des
colonnes gauches et droites) */
margin:0 ; padding:0 ; /* marges intérieures et extérieures
*/
border: 3px solid black} /* Bordure du container (donc de
tout le "tableau")*/
.gauche { /* boite gauche (avec le menu) */
position: absolute; /* positionné par rapport à
la boite parent (ici .container) */
left: 25px; /* démarre à 10 pixels de la gauche
de la boite parent */
width: 19%; /* largeur de la boite */
padding-top: 10px; /* marge intérieure haute */
border:dashed 1px orange} /* encadrement discret de la boite
*/
.centre { /* boite qui "pousse" vers le bas le reste de la
page */
margin: 0 21% 0 21%; /* marges gauche et droite, pour la
place des 2 autres colonnes */
border-left: 3px solid black; /* bordure gauche */
border-right: 3px solid black; /* bordure droite */
padding: 10px; /* marge intérieure - indispensable
*/
background-color: #CCCCCC} /* couleur du fond */
.droite { /* boite droite (avec le commentaire) */
position: absolute; /* positionné par rapport à
la boite parent (ici .container) */
right: 25px; /* démarre à 10 pixels de la droite
de la boite parent */
width: 19%; ; /* largeur de la boite */
border:dashed 1px orange} /* encadrement discret de la boite
*/
</style>
</head>
<body>
<p>Cette zone est totalement libre, et a une hauteur indéfinie
: c'est le déroulement
de la page normale. Elle repousse le "tableau" CSS qui est dessous.</p>
<p> </p>
<p> </p>
<div class="container">
<div class="gauche">Colonne Gauche</div>
<div class="droite"> <!-- Dans certains cas, mettre
la colonne droite avant la centre passe mieux -->
<p>Colonne droite</p>
</div>
<div class="centre">
<p>Colonne centre</p>
<p>Colonne centre</p>
<p>Colonne centre</p>
<p>Colonne centre</p>
</div>
</div> <!-- fin du container -->
<p>Reprise de la page normale, en dessous du "tableau" CSS</p>
</body>
</html>
Cette zone est également totalement libre. C'est de nouveau le déroulement normal de la page. Le "tableau" CSS au-dessus repousse ce bas de page au fure et à mesure qu'il grandit.