OpenWeb - Positionnement float - Exemples

Cette page illustre différents exemples utilisés dans Initiation au Positionnement CSS : 2.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 :

Une boîte jaune flottant doté d'un contenu plus long...

Une boîte verte

 

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

 

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 :

Une boîte jaune flottant doté d'un contenu plus long...

Une boîte verte


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 :

Une boîte jaune flottant doté d'un contenu plus long...

Une boîte verte


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 :

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


Conditions de réutilisation

Cette page est valide Xhtml et Css

Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi