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. Caque fois que possible je présente les exemples à l'aide d'une boîte entourée d'une fine marge afin de mieux visualiser les résultats.

"float" défini à droite (dans une boîte)

Code 3 dans HEAD

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

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

Code 3 dans BODY

<div class="conteneur"> <div class="floatright"> </div> </div>

Résultat exemple 3

"float" défini à droite avec du texte s'écoulant à gauche

Code 4 dans BODY

<div class="conteneur"><div class="floatright"></div> Lorem ipsum dolor ... <.div>

Résultat exemple 4

"float" avec plusieurs boîtes en ligne

Code 5 dans HEAD

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

.floatleft
{ float: left ;
width: 66px ;
height: 100px ;
background-color: #00FF00 ;
overflow: auto ; }

Code 5 dans BODY

<div class="conteneur">
<div class="floatleft"><b>A - </b></div>
<div class="floatleft"><b>B - </b></div>
<div class="floatleft"><b>C -</b> Lorem ipsum dolor sit amet, ... volutpat. </div> </div>

Résultat exemple 5

Il faut remarquer dans cet exemple que pour une meilleure présentation, la largeur de la boîte a été portée à 66px, soit trois colonnes. Idem pour la hauteur des "float". Quant à la propriété "overflow: auto ;" elle permet de placer un scroll pour faire défiler le texte.

A partir de cet exemple il est facile de créer des colonnes comme l'exemple en est donné par ailleurs.

"float" et positionnement suivant dimension des boîtes

Code 6 dans HEAD (quelques modifos de valeurs)

.conteneur1
{ width: 300px ; height: 200px ; border: 1px solid #990000 ; }

.floatleft1
{ float: left ; width: 50px ; height: 50px ; background-color: #CCCCCC ; border: 1px solid #000000 ; }

.floatleft2
{ float: left ; width: 280px ; height: 100px ; background-color: #00FF00 ; border: 1px solid #FF0000 ; }

Code 6 dans BODY

<div class="conteneur1"> <div class="floatleft2"> bloc floatleft1 </div> <div class="floatleft1"> bloc floatleft2 </div> </div>

Résultat exemple 6

Vous constatez que lorsque deux (ou plusieurs) éléments de différentes largeurs sont implémentés et si le second, comme dans l'exemple ci-dessus, ne peut se positionner dans la largeur totale de la fenêtre il va se décaler immédiatement en suivant le retour de ligne.

Il en serait de même si "float" avait été défini à droite, les deux éléments venant border le coté droit du conteneur. 

Une lettrine est aussi réalisable...

(Normalement vous pouvez réaliser des "lettrines" avec la propriété "first-letter" présentée en détail page 60)

Code 6a dans HEAD

.lettrine
{
float: left ;
width: .8em ;
font-size: 4em ;
}

Code 6a dans BODY

<span class="lettrine"> L </span>orem ipsum dolor...

Résultat exemple 6a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Nota

Il est très fortement conseillé de définir une valeur à la propriété "width" pour fixer la largeur d'un élément afin d'éviter tout résultat autant imprévisible que désastreux. Supposez que vous ne placiez qu'un ou quelques caractères et le "float" serait réduit à une minuscule portion...

Page suivante, je vous propose quelques exemples supplémentaires de positionnement à partir de cette propriété "float", avant de poursuivre avec la propriété "clear" qui l'accompagne souvent.