Gabarit XHTML/CSS centré de deux colonnes extensibles avec menu à gauche et entête et pied de page.
Largeur : 80%.
Longueur : extensible.
Colonnes indépendantes et extensibles.
Menu à gauche.
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="contenu"></div>
 
<div id="menu-gauche"></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;
}
#contenu{
float : right;
width : 77%;
margin : 5px 5px 5px 0;
padding : 5px;
background : #eeeeee;
border : 1px solid #002f2f;
}
#contenu a{
color : #a7a37e;
text-decoration : none;
}
#menu-gauche {
float : left;
width : 21%;
margin : 5px 0 5px 5px;
background : #eeeeee;
border : 1px solid #002f2f;
}
#menu-gauche ul {
list-style-type : none;
padding : 0;
}
#menu-gauche li a {
display : block;
height : 25px;
color : #002f2f;
text-decoration : none;
line-height : 25px;
padding-left : 10px;
}
#menu-gauche li a:hover {
background : #002f2f;
color : #ffffff;
}

Démo du gabarit XHTML/CSS

Catégorie CSS

Mise en forme des paragraphesPropriété marginPropriété paddingMise en forme des bordures en cssPropriété de mise en forme du texte en cssMise en forme de la police en css-Propriété fontMise en forme de l'arrière plan en css-Propriété backgroundMise en forme des listes en CSSPropriété display en CSSChanger l'aspect du curseur ou pointeur en CSSPropriété z-index en CSSCréer des coins arrondis en CSSCréer un site en utilisant le CSS et une feuille de styleCréer un cadre en CssCréer un menu en cssCreer un header en cssCréer un conteneur en cssCréer des effets sur les liens en cssCréer plusieurs effets de style sur les liens avec du cssFeuille de style externeExemple d'une page créée avec du CSSAligner du texte à côté d'une image en cssCréer une info bulle en cssCréer une info bulle en css 2Rollover en CSS avec une seule imageCréer des colonnes en CSS à partir d'une listeMise en forme CSS d'un formulaireAfficher un titre sur une image avec effet de transparenceLes Sprite CSSComment placer une image dans un élément de type « input » d'un formulaireComment superposer les champs d'un formulaireGabarit XHTML/CSS d'une colonne fixeGabarit XHTML/CSS deux colonne fixesGabarit XHTML/CSS trois colonne fixesGabarit XHTML/CSS d'une colonne fixe avec entête et pied de page occupant toute la largeurGabarit XHTML/CSS de deux colonnes fixes avec entête et pied de page occupant toute la largeurGabarit XHTML/CSS de trois colonnes fixes avec entête et pied de page occupant toute la largeurGabarit XHTML/CSS d'une colonne extensibleGabarit XHTML/CSS de deux colonnes extensibles avec menu à droiteGabarit XHTML/CSS de deux colonnes extensibles avec menu à gaucheGabarit XHTML/CSS de trois colonnes extensibles