Une seule ligne et une colonne ci-dessous sont une citation :
corps { marge : 0px ; remplissage : 0px ; texte-align : centre }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px }
Deux lignes et une colonne :
corps { marge : 0px ; remplissage : 0px ; texte-align : centre ;}
#content-top { marge-gauche:auto; marge-droite:auto; largeur : 400px largeur : 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
Trois lignes et une colonne :
corps { marge : 0px ; remplissage : 0px ; texte-align : centre }
#content-top { margin-left:auto; margin-right:auto;
largeur: 400px; largeur: 370px
;; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px }
Une seule ligne et deux colonnes :
#bodycenter {largeur : 700 px ; marge-droite : auto ; marge-gauche : auto ; débordement : auto ;
#bodycenter #dv1 {flottant : gauche ; largeur : 280 px ;}
#bodycenter #dv2 {float: right;width: 410px;}
Deux lignes et deux colonnes Ce qui suit est un fragment de citation :
#header{largeur : 700 px ; marge-droite : auto;marge-gauche : débordement : auto ;}
#bodycenter {largeur : 700 px ; marge-droite : auto ; marge-gauche : débordement automatique : auto ;
#bodycenter #dv1 { float : gauche ; largeur : 280px ;}
#bodycenter #dv2 { float: right;width: 410px;}
Trois lignes et deux colonnes Ce qui suit est un fragment de citation :
#header{largeur : 700 px ; marge-droite : auto ; marge-gauche : auto ;
#bodycenter {largeur : 700 px ; marge-droite : auto ; marge-gauche : auto ;
#bodycenter #dv1 { float : gauche ; largeur : 280 px ;}
#bodycenter #dv2 { float : droite ; largeur : 410px ;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto }
Positionnement absolu sur une seule ligne et trois colonnes :
#gauche { position : absolue ; haut : 0px ; gauche : 0px largeur : 120px ;
#milieu {marge : 20px 190px 20px 190px } ;
#right {position : absolue ;top : 0px ; droite : 0px ; largeur : 120 px ;}
positionnement flottant un
xhtml :
Voici une citation :
<div id="warp"> <div id="column"> <div id="column1">Ceci est la première colonne</div> <div id="column2">Ceci est la deuxième colonne</div> <div class="clear"></div> </div> <div id="column3">Voici la troisième colonne</div> <div class="clear"></div> </div>
CSS :
Voici une citation :
#wrap{ largeur:100%; hauteur:auto;}
#colonne{ float:gauche; largeur:60%;}
#colonne1{ float:gauche; largeur:30%;}
#colonne2{ float:right; largeur:30%;}
#colonne3{ float:right; largeur:40%;}
.clear{ clear:both;}
float positionnant deux
xhtml :
Ce qui suit est un fragment cité : <div id="center" class="column"> <h1>Ceci est le contenu principal.</h1> </div> <div id="left" class="column"> <h2 >Voici la barre latérale gauche.</h2> </div> <div id="right" class="column"> <h2>Voici la barre latérale droite.</h2> </div>
CSS :
Voici une citation :
corps {marge : 0 ; rembourrage-gauche : 200 px ; rembourrage-droite : 190 px ; largeur min : 240 px ;}
.colonne {position : relative ; flotteur : gauche ;}
#centre {largeur : 100 % ;}
#gauche {largeur : 180 px ; droite : 240 px ; marge gauche : -100 % ;}
#right {width : 130px;margin-right : -100%;}
Deux lignes et trois colonnes
xhtml : Ce qui suit est un fragment cité : <div id="header">Voici la ligne du haut</div> <div id="warp"> <div id="column"> <div id="column1"> Voici la première ligne Une colonne</div> <div id="column2">Voici la deuxième colonne</div> <div class="clear"></div> </P> <P></div > <div id= "column3">Voici la troisième colonne</div> <div class="clear"></div> </div>
CSS :
Voici une citation :
#header{largeur:100%; hauteur:auto;}
#wrap{ largeur:100%; hauteur:auto;}
#colonne{ float:gauche; largeur:60%;}
#colonne1{ float:gauche; largeur:30%;}
#colonne2{ float:right; largeur:30%;}
#colonne3{ float:right; largeur:40%;}
.clear{ clear:both;}
trois lignes et trois colonnes
xhtml :
Ce qui suit est un extrait cité : <div id="header">Voici la ligne du haut</div> <div id="warp"> <div id="column"> <div id="column1">Voici la première colonne </div> <div id="column2">Voici la deuxième colonne</div> <div class="clear"></div> </div> <div id="column3">Voici la troisième colonne </div> <div class="clear"></div> </div> <div id="footer">Voici la ligne du bas</div>
CSS :
Voici une citation :
#header{largeur:100%; hauteur:auto;}
#wrap{ largeur:100%; hauteur:auto;}
#colonne{ float:gauche; largeur:60%;}
#colonne1{ float:gauche; largeur:30%;}
#colonne2{ float:right; largeur:30%;}
#colonne3{ float:right; largeur:40%;}
.clear{ clear:les deux;}
#footer{largeur:100%; hauteur:auto;}