présentation flottante sur trois colonnes
La technique de base pour créer une présentation flottante sur trois colonnes à l'aide de feuilles de style CSS consiste à utiliser des attributs float pour reléguer les colonnes latérales sur les côtés gauche et droit de la fenêtre de navigation et permettre au contenu principal de remplir le vide laissé au milieu. La définition des marges droite et gauche pour la colonne du milieu cantonne le contenu principal dans une colonne verticale bien agencée au lieu de déborder sur les colonnes latérales. Ces dernières disposent quant à elles chacune d'une largeur fixe, mais la colonne du milieu peut s'élargir ou se contracter en fonction des dimensions de la fenêtre de navigation, ce qui en fait une présentation flottante. (Cette technique est décrite plus en détail dans l'article précédent.)
Voici l'exemple de code pour une présentation sur trois colonnes avec un en-tête et un pied de page s'étendant sur toute la largeur de la page, comme le montre la figure A. Tout d'abord, les styles CSS :
body { margin: 0px; padding: 0px; }
div#header { text-align: center; background-color: #CCCCCC; height: 60px; margin: 0px; padding: 1px; }
div#navcol { padding: 10px; width: 130px; float: left; }
div#main { padding: 10px; margin-left: 160px; margin-right: 160px; }
div#sidecol { padding: 10px; width: 130px; float: right; }
div#foot { border-top: solid #000 1px; background-color: #CCCCCC; padding: 10px; text-align: center; clear: both; }
Et voici le balisage XHTML. Pour rester concis, je montre le contenu des blocs div de chaque colonne latérale sous forme de listes simples non triées et j'abrège le contenu principal et le texte du pied de page.
<body>
<div id="header">
<h1>Header Text</h1>
</div>
<div id="navcol">
<h4>Nav Column</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
<li>Oh, no, it is an ever fixed mark</li>
<li>Let me not to the marriage of true minds</li>
</ul>
</div>
<div id="sidecol">
<h4>Starboard Side Column</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
</ul>
</div>
<div id="main">
<h2>Main Content</h2>
<p> That looks on tempests ... taken.</p>
<p>That looks on tempests ... taken.</p>
<p>If this be error ... height be taken.</p>
<p>That looks on tempests ... remove.</p>
</div>
<div id="foot">
<p>Footer text goes here. ... </p>
</div>
</body>
?
!
...