Avec les propriétés "float" et "clear" associées, vous pouvez aspirer à d'autres compositions qui avec un peu de goût et fonction de vos besoins peuvent être maintenant être envisagées.

Première composition

Un en-tête avec deux blocs positionnés à droite et à gauche, et du texte entre les deux qui compose le premier ensemble, plus du texte en suivant mais dessous.

Code 14 dans HEAD

.flux
{clear: both ; }

.flux1
{ float : left; margin: 10px ; }

.flux2
{ float : right ; margin: 10px ; }

Code 14 dans BODY

<img src="aimages/v216.jpg" class="flux1" alt="float gauche"> <img src="aimages/v216.jpg" class="flux2" alt="float droit"> <br> Ce paragraphe contient une image flottante à droite et une image flottante à gauche ce qui induit que le texte doit couler le long des images. <p class="flux"><font color="#990000">Ce paragraphe en marron a un "clear : both" et de ce fait ne doit pas couler le long d'aucune des deux images mais se placer en dessous.</font></p>

Résultat exemple 14

Ce paragraphe contient une image flottante à droite et une image flottante à gauche ce qui induit que le texte doit couler le long des images.

Ce paragraphe en marron a un "clear : both" et de ce fait ne doit pas couler le long d'aucune des deux images mais se placer en dessous..

Explications

Une image est placée de chaque coté de la page à l'aide des propriétés flux1 et flux2. Vous pouvez noter qu'un "margin:10px" est défini pour éviter que le texte placé entre les deux images ne vienne coller. C'est un petit plus de bonne présentation.

Le premier paragraphe du texte va donc venir se placer entre les deux images. Pour le deuxième paragraphe de couleur marron, et bien que tapé à la suite, comme la propriété "flux" est codifiée avec la valeur "both", vous allez en conséquence le déplacer sous chacune des boîtes flottantes qui précèdent dans le code source, et ce texte va s'écouler de façon indépendante.

Positionnement en ligne dans BODY avec deux boîtes et "clear"

Code 15 dans BODY

<div style=" float: left ; border: solid 2px #990000 ; background-color: #FFFF00 ; width: 250px ; padding: 10px ; color: black ; " >
Ce "float: left" en jaune est défini et positionné devant le "float: right" qui est de couleur bleu clair.</div>

<div style=" float: right ; border: solid 2px #990000 ; background-color: #66FFFF ; width: 250px ; padding: 10px ; color: #000000 ; " >
Ce "float: right" en bleu clair est défini et positionné après la propriété "float: left" qui est de couleur jaune.</div>

Résultat exemple 15

 Explications

Cet exemple est constitué de deux blocs, un en jaune et le deuxième en bleu, avec les définitions directement placées en ligne dans le BODY. Remarquez ici que le texte entre les deux blocs n'a pas été modifié et qu'il reste collé à ses éléments voisins, ce qui n'est pas bien beau et qui explique le petit "margin" glissé dans l'exemple 14. 

Deuxième composition 'vignettes"

Je vous propose cette fois de composer des cellules, qui parfois (suivant leurs dimensions et présentation) sont appelées "vignettes".

Code 16 dans HEAD

.floatleft
{ float: left ;
width: 70px ;
border: solid 1px #FF0000 ;
text-align: center ; }

Code 16 dans BODY

<p class="floatleft">boîte 01</p>
<p class="floatleft">boîte 02</p>
.....

Résultat exemple 16

boîte 01

boîte 02

boîte 03

boîte 04

boîte 05

boîte 06

boîte 07

boîte 08

boîte 09

boîte 10

boîte 11

boîte 12

boîte 13

boîte 14

boîte 15

Autre modèle de vignettes

Code 17 dans HEAD

.vignette div

{ float: left ;
width: 75px ;
height: 50px ;
padding: 6px ;
margin: 5px ;
border: 2px solid blue ;
background-color: #66FFFF ;
text-align: center ;
font-weight: bold ;
color: #FF0000 ; }

Code 17 dans BODY

<div class="vignette div">
<div>vignette<br> 01</div>
<div>vignette<br> 02</div>
..... </div>

Résultat exemple 17