Positionnement float - Exemples

Cette page illustre différents exemples utilisés dans 3.position float.

---

Boîte flottante simple

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.

Boîte flottante débordante

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

Boîte flottante avec spacer

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 :

Vignettes flottantes

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">&nbsp;</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 flottante et séparateur 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 :

Boîte flottante et séparateur hr invisible

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;
visibility: hidden;
}

Résultat :

Vignettes flottantes et séparateur hr invisible

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...
<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 :