Gabarit XHTML/CSS de trois colonnes extensibles

Gabarit XHTML/CSS centré de trois colonnes extensibles avec entête et pied de page.
gabarit css extensible 3 colonnes
Largeur : 80%.
Longueur : extensible.
3 colonnes indépendantes et extensibles.
Entête et pied de page fixé à 150px de hauteur.
CSS valide niveau 2.1.
Valide XHTML 1.0 Strict.
Testé sous Firefox 4, Internet Explorer 8 et Chrome.

Code XHTML :
<div id="conteneur">
 
<div id="header"></div>
 
<div id="colonne-gauche"></div>
<div id="colonne-centre"></div>
<div id="colonne-droite"></div>
 
<div id="footer"></div>
 
</div>
Code CSS :
/* ============================================== 
Gabarit HTML/CSS
© creer-un-site.fr
Conditions d'utilisation: http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
body { margin : 0; background : #002f2f; } #header { width : 100%; height : 150px; background : #a7a37e; } #footer { width : 100%; height : 150px; background : #a7a37e; float : left; } #conteneur { margin : 0 auto; width : 80%; height : auto; background : #e6e2af; overflow : auto; } #colonne-gauche{ float : left; width : 20%; padding : 5px; background : #eeeeee; border : 1px solid #002f2f; margin : 5px; } #colonne-centre{ float : left; width : 55%; padding : 5px; background : #eeeeee; border : 1px solid #002f2f; margin : 5px; } #colonne-droite{ float : right; width : 20%; padding : 5px; background : #eeeeee; border : 1px solid #002f2f; margin : 5px; } #colonne-gauche a, #colonne-centre a, #colonne-droite a{ color : #a7a37e; text-decoration : none; }
Démo du gabarit XHTML/CSS
Voir/déposer un commentaire (0) | Signaler un problème