float
- ExemplesCette page illustre différents exemples utilisés dans Initiation au Positionnement CSS : 2.position float.
Code HTML:
<p class="jaune">Une boîte jaune flottant</p> <p class="verte">Une boîte verte doté d'un contenu plus long...</p>
Code CSS:
.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; } .verte { background-color: #00ff00; }
Résultat :
Une boîte jaune flottant
Une boîte verte doté d'un contenu plus long...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Code HTML:
Une boîte jaune flottant doté d'un contenu plus long...
Une boîte verte
Code CSS:
.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; } .verte { background-color: #00ff00; }
Résultat :
Une boîte jaune flottant doté d'un contenu plus long...Lorem ipsum dolor sit amet
Une boîte verte
Code HTML:
<div class="verte5"> <p class="jaune5">Une boîte jaune flottant doté d'un contenu plus long...</p> <p>Une boîte verte</p> <div class="spacer"> </div> </div>
Code CSS:
.jaune { background-color: #ffff00; float: right; width: 100px; text-align: center; margin: 0; } .verte { width: 100%; background-color: #00ff00; } .spacer { clear: both; }
Résultat :
Une boîte jaune flottant doté d'un contenu plus long...
Une boîte verte
Code HTML:
<div class="conteneur"> <p class="flottante">boîte verte 1</p> <p class="flottante">boîte verte 2</p> <p class="flottante">boîte verte 3</p> ...etc... <div class="spacer"> </div> </div>
Code CSS:
.flottante { background-color: #00ff00; margin: 2px; float: left; width: 100px; text-align: center; } .conteneur { width: 100%; } .spacer { clear: both; }
Résultat :
boîte verte
1
boîte verte
2
boîte verte
3
boîte verte
4
boîte verte
5
boîte verte
6
boîte verte
7
boîte verte
8
boîte verte
9
boîte verte
10
hr
Code HTML:
<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long...</p> <p class="verte">Une boîte verte <hr> </p>
Code CSS:
.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; } .verte { background-color: #00ff00; } hr { clear: both; }
Résultat :
Une boîte jaune flottant doté d'un contenu plus long...
Une boîte verte
hr
invisibleCode HTML:
<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long...</p> <p class="verte">Une boîte verte <hr> </p>
Code CSS:
.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; } .verte { background-color: #00ff00; } hr { clear: both; visibility: hidden; }
Résultat :
Une boîte jaune flottant doté d'un contenu plus long...
Une boîte verte
hr
invisibleCode HTML:
<div class="conteneur"> <p class="flottante">boîte verte 1</p> <p class="flottante">boîte verte 2</p> <p class="flottante">boîte verte 3</p> ...etc... <hr /> </div>
Code CSS:
.flottante { background-color: #00ff00; margin: 2px; float: left; width: 100px; text-align: center; } .conteneur { width: 100%; } hr { clear: both; visibility: hidden; }
Résultat :
boîte verte
1
boîte verte
2
boîte verte
3
boîte verte
4
boîte verte
5
boîte verte
6
boîte verte
7
boîte verte
8
boîte verte
9
boîte verte
10
Accueil OpenWeb | Plan du site | Conditions de réutilisation
Cette page est valide Xhtml et Css
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi