(div id=titre) Mise en page avec des calques

(div id=navigation)

Mise en page 3 colonnes <

(div id=principal)

Le code html

[En rouge, les différences avec l'exemple précédent]

<div id="titre"> Mise en page avec des calques</div>
<div id="navigation"> (un menu de navigation)</div>
<div id="principal"><div id="voiraussi"> (des renvois incrustés dans le corps de la page) </div> (le corps de la page) </div>

La feuille de style

#titre{
width:100%;height=auto;
background-color: #FF0000;
z-index:3;
/* z-index permet de déterminer la position du calque en cas d'empilement : le plus en-dessous de la "pile" aura un z-index:1 */
}

#navigation{
width:25%;height=auto;
background-color: #00FF00;
z-index:3;
float:left ;
/* le calque "flottera" à gauche : ce qu'on écrira à la suite viendra se placer à autour de lui et non en-dessous ("habillage") */
}

#principal
{

width: 75%;height=auto; /* le calque occupera les 3/4 de la largeur de l'écran */
background-color: #CCCCCC;layer-background-color: #CCCCCC;
z-index:4
float:left;
/* lui aussi "flottera" à gauche, mais il viendra "buter" contre le calque flottant précédent */
}

#voiraussi
{
width:33%;height=auto; /* le calque occupera un tiers de son élément parent (i.e le calque "principal" cf le html ci-dessus) */
background-color: #FFFF00;
z-index:none /* ou ne pas en mettre sinon ça ne marchera pas !???! */ ;
float:right;
/* lui flotte à droite */
}