Franc83

Div flottants

10-09-2008

Des blocs de texte flottants

Avoir des blocs flottants à gauche et à droite avec du contenu au milieu, peut être très décoratif dans un article.

Voici une technique utilisée avec des div flottants dans lesquels on peut insérer du texte ou des images

Votre texte ici du bloc jaune

Votre texte ici du bloc bleu

votre texte qui va entre les deux blocs

Voici le code dans le bloc jaune :

<div align="center">
<div style=" FLOAT: left; WIDTH: 128px; BACKGROUND-COLOR: #ffff00; height:auto">
Votre contenu ici du bloc jaune</DIV>
<div style=" FLOAT: right; BACKGROUND-COLOR: #66ffff; height:auto">
Votre contenu ici du bloc bleu
</DIV>
Votre contenu entre les blocs
</div>

Votre texte ici pour le bloc bleu
ou une image :

votre texte qui va entre les deux blocs

Remarquez aussi dans le code la première partie FLOAT: left pour le positionnement gauche et la deuxième partie FLOAT: right pour le positionnement droit.
Les deux div sont imbriqués dans un troisième div qui englobe les deux div flottants.

Le height : auto est important pour que les div s'adaptent à la taille du contenu en hauteur.

Pour éviter les chevauchements avec le contenu sous les blocs, on ajoute sous la fermeture du dernier div le code suivant :

Citez cet article

Commentaires (1)

1. plugboard promotion gratuite
Ecrit par caulier , le 19-08-2009 18:58
merci de nous donner ces astuces ca aide vraiment pour les débutants.
cordialement

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront