Les possibilités offertes par la propriété "float" sont nombreuses, mais il y a souvent des divergences de présentation suivant les navigateurs utilisés et il convient de ne pas trop s'écarter des concepts de base. Je vous propose quelques exemples commentés.

"float" défini à gauche et placé en premier

Code 7 dans HEAD

.conteneur
{ width: 200px ;
height: 150px ;
border: solid 1px #990000 ; }

.floatleft
{ float: left ;
width: 50px ;
height: 50px ;
background-color: #00FF00 ; }

Code 7 dans BODY

<div class="conteneur"> <div class="floatleft"> flot = left </div>
Lorem ipsum dolor sit amet.....consequat. </div>

Résultat exemple 7

vous retrouvez l'exemple 4 de la page précédente à l'exception de l'élément "float" qui cette fois est défini à gauche. Dans le présent exemple, float se positionne en premier suivant ainsi l'ordre d'arrivée des données...

"float" défini à gauche et placé en dernier après le texte

Code 8 dans BODY

<div class="conteneur"> Le dolor d'ipsum ... <.div> <div class="floatleft"> float = left </div>

Résultat exemple 8

... dans cet exemple se conformant au flux des données, l'élément "float" se positionne en dernier après le texte normal.

Images avec légendes

Code 9 dans HEAD

.floatleft3
{
float: left ;
width: 150px ;
margin: 20px ;
background-color: #FFFFFF ; text-align:center ;
}

Code 9 dans BODY

<div class="floatleft3"> <img src="aimages/v139.jpg" width="66" height="100"><br> <b> Un chien berger </b></div>
<div class="floatleft3"> <img src="aimages/v139.jpg" width="66" height="100"><br><b> Un autre chien berger </b></div>
<p> <font color="#0000FF"> Des chiens il pourrait en contenir davantage ce chenil. </font></p>

Résultat exemple 9

Un chien berger

Un autre chien berger

Des chiens il pourrait en contenir davantage ce chenil.

"float" défini directement en ligne

Code 10 dans BODY

<h3 style="float: left ; display: block ;"> titre de gauche </h3>
<h3 style="float: right ; display: block ;"> titre de droite </h3>

Résultat exemple 10

TITRE GAUCHE

TITRE DROITE

Code11 avec image

<p style="float: left ; display: block ; "><img src="aimages/v153.gif" width="60" height="60"></p>
<p style="float: right ; display: block ; "><img src="aimages/v153.gif" width="60" height="60"></p>

Résultat exemple 11

Sommaire CSS ... @ ... Propriété CLEAR