Méthodes couramment utilisées pour la mise en page CSS : float:none|left|right
Valeur:
aucun : Valeur par défaut. L'objet ne flotte pas
gauche : le texte s'écoule à droite de l'objet
à droite : le texte s'écoule à gauche de l'objet
Comment ça marche, voir un exemple d'une ligne et de deux colonnes
Code xhtml :
| Voici le contenu cité : <div id="wrap"> <div id="column1">Voici la première colonne</div> <div id="column2">Voici la deuxième colonne</div> <div class="clear"></div> /*Ceci est contraire à l'intention du standard Web, cela signifie simplement que les éléments en dessous doivent être effacés*/ </div> |
Code CSS :
| Voici le contenu cité : #wrap{largeur:100;hauteur:auto;} #colonne1{float:gauche;largeur:40;} #colonne2{float:right;width:60;} .clear{clear:les deux;} |
position:statique|absolu|fixe|relatif
Valeur:
statique :?Valeur par défaut. Pas de positionnement particulier, l'objet suit les règles de positionnement HTML
Absolu : faites glisser l'objet hors du flux de documents et utilisez les attributs gauche, droite, haut, bas et autres pour effectuer un positionnement absolu par rapport à son objet parent le plus proche avec le plus de paramètres de positionnement. Si aucun objet parent n’existe, l’objet body est utilisé. Et sa cascade est définie via l'attribut z-index
corrigé : Non pris en charge. Le positionnement des objets suit la méthode absolue. Mais il y a quelques règles à suivre
relatif : Les objets ne peuvent pas être empilés, mais seront décalés dans le flux de documents normal en fonction des attributs gauche, droite, haut, bas et autres.
Il implémente l'exemple d'une ligne et de deux colonnes
Code xhtml :
| Voici le contenu cité : <div id="wrap"> <div id="column1">Voici la première colonne</div> <div id="column2">Voici la deuxième colonne</div> </div> |