[Résolu]Pb de compréhension sur gabarit de Page en CSS

Bonjour à tous,

voilà, en farfouillant le Web à la recherche de ressource sur la mise en page de Site en CSS, je suis tombé sur ce site (excellent par ailleurs).

J'ai voulu mettre en place le gabarit 15 (Modèle qui utilise les floats, voici le lien http://css.alsacreations.com/modeles/modele10.htm) pour mon site mais voilà bizarrement ça ne fonctionnait pas comme pour le modèle.

En effet, le badeau droit se trouvait bien en droite mais en dessous du bloc formé par le bandeau gauche et le contenu central comme si il était repoussé par une commande clear: both

C'est ce que j'ai cru dans un premier temps mais à force de chercher, j'ai trouvé la réponse.

En fait, dans ma page HTML, je déclaré la balise div "bandeau_gauche" (float: left) puis la balise div "contenu_central" (margin-left et margin-right = à la largeur des balises de côté) et enfin la balise div "bandeau_droit" (float: right), je respecté ainsi le visuel du site pour une meilleurs compréhension du code.
En faisant ainsi, j'avais la blaise div "bandeau_droit" qui était repoussé en dessous des 2 précédentes comme je l'ai expliqué.

Pour corriger le problème, il faut en fait déclarer dans le HTML les 2 balises div en float ("bandeau_gauche" puis "bandeau_droit") comme cela est fait dans le modèle.

Mais voilà, j'ai beau chercher, je ne comprends pas pourquoi ????

Est ce que quelqu'un peut me donner la raison de ce fonctionnement ?

Merci d'avance,

Throdo
Modifié par Throdo (08 Aug 2007 - 13:49)

Bonjour,

Throdo a écrit :
Mais voilà, j'ai beau chercher, je ne comprends pas pourquoi ????

Ben tu as donné la réponse, non? C'est le principe du positionnement flottant: le bloc part de sa position «normale» (celle qu'il aurait s'il n'était pas flottant), et va se loger le plus à droite ou le plus à gauche possible dans son conteneur. Mais il ne va pas remonter comme par magie, hein.

Est-ce que tu as lu le tutoriel suivant?
Un design fluide avec trois «colonnes», grâce au positionnement flottant.

On y indique notamment la page suivante, qui permet de constater de visu quelques caractéristiques du comportement des flottants:
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
(À voir avec Firefox, Opera, Safari ou IE7... mais pas IE6.)

Merci beaucoup pour m'avoir le doigt sur la raison.

Effectivement, c'est clair maintenant. J'avais loupé quelque chose sur les flottant, je pensais qu'il se positionnait automatiquement par rapport à son conteneur sans prendre en compte les autres balises.

Throdo