Alignement des boites

suivant: La balise DIV monter: Les balises blocs précédent: Les balises blocs Table des matières

Alignement des boites

L'attribut FLOAT permet de définir l'alignement d'un bloc avec le texte qui le suit. Les deux valeurs possibles sont left et right. Le bloc est aligné soit à gauche soit à droite et le texte qui suit épouse la forme de l'objet au lieu de se situer immédiatement en-dessous.

Exemple:

<STYLE TYPE="text/css">
    H1 {background-color: red; float:left; width:40%}
</STYLE>
<BODY>
 <H1> Un titre sur fond rouge aligne a gauche et qui occupe 
      40% du document </H1>
 <P> Ce paragraphe qui suit le titre ne se trouve pas sous lui, 
     il epouse la forme du bloc.
 </P>
</BODY>

Pour stopper l'effet de float sur la suite du texte il suffit d'insérer la balise <BR> avec l'attribut CLEAR à l'endroit où l'on désire que le texte n'épouse plus la forme du bloc.

Exemple:

<STYLE TYPE="text/css">
    H1 {background-color: red; float:left; width:40%}
</STYLE>
<BODY>
 <H1> Un titre sur fond rouge aligne a gauche et qui occupe 
      40% du document </H1>
 <P> Ce paragraphe qui suit le titre ne se trouve pas sous lui, 
     il epouse la forme du bloc.
     Pour ne plus suivre le bloc on insere la balise BR. 
     <BR CLEAR>
     Le texte qui suit est maintenant sous le bloc .      
 </P>
</BODY>

Attention: il ne faut pas spécifier des valeurs de marge pour un bloc pour lequel l'attribut FLOAT a été défini, le résultat est souvent innattendu !
Si malgré tout vous désirez que le bloc respecte une certaine marge, il existe une solution qui fait appel à la balise <DIV>.

Pascal VERON 2000-04-07