[Résolu] Déformation par float? La magie du "clear: both;"!

Bonjour,

J'espère bien repsecter les règles de POST en expliquant mon problème ici...
Bref voici la situation.

Ayant longtemps été habitué aux tableaux, comme bien d'autres, je me met à la mise en page via CSS et bloc ainsi qu'au codage XHTML. Je pense avoir saisie pas mal de rudiments, principalement grace aux excellents tutaux et autres articles disponibles sur le net et notament ici.

Mais là j'avous que ça me dépasse un peu O_o.
Voici la maquette problématique: http://maquette.funpart.net/maquette.htm.

Le problème se situe au niveau du bloc dit "de contenu" [id="affichage"].
En effet, dans ce dernier j'aimerais positionner un contenu qui pourrait être mis en forme dans deux colonnes de part et d'autres du conteneur [comme dans l'exemple visuel: une à gauche, une à droite].
Mais si le rendu "gauche-droite" est bon avec la première "colonne" [comprendre bloc] en "float: left;" et la seconde en "float: right;" mon bloc de "bas de page" [id="information"] devient lui complètement diforme O_o et "passe par dessus" le bloc de contenu [effet de superposition non-souhaité].
Normal, puisque le float fait sortir le bloc du flux. Le bloc de contenu ne possède alors plus de hauteur puisqu'il ne contient plus que des blocs flottant. Ce qui provoque une position du bloc de bas de page qui donne un effet de superposition :s [c'est pas très clair la... si?].

Et c'est là que je ne comprend plus: le tout [bloc "contenu" et "bas de page"] est contenu dans un bloc dit "central" [id="fonctionnel"] qui permet la mise en page avec les autres bloc "bannière" et "pied de page" [du même id que leur utilité]. Et si mon bloc de "contenu" ne semble pas influer sur le positionnement vertical de son bloc frère dit "bas de page"... et bien il semble bien influé sur son bloc parent "central" qui lui même contraint le positionement de son bloc frère "pied de page" O_o.

La solution provisoire:
je me suis résignié pour le moment à positionner le contenu du bloc "contenu" avec un tableau à deux cellules :s. Comme vous pourrez le constater.

Ma question:
comment faire pour remplacer le tableau par deux blocs "en ligne"; l'un à gauche, l'autre à droite. Et ça sans avoir la déformation [l'effet de superposition non-souhaité] cité plus haut, que j'aimerais bien comprendre tout de même .

Deux petites question en "à cotés":
Qu'est ce qu'on entend par "mise en page fluide"?
Je réfléchis pour dimensionner mes sites en "em" plutôt qu'en "px". Avantages, inconvénients?

En vous remerciant d'avance pour vos pistes de reflexions et autres éléments que vous apporterez à ce sujet.

Bonne journée!
Modifié par Just (21 Apr 2006 - 15:39)

bonjour Just

Tu trouveras toute l'explication détaillée sur cette page :
http://openweb.eu.org/articles/initiation_float/

... Et ne rate pas l'utilisation du "clear: both;"

Et ce tutoriel pour créer un site fluide

Bonjour !
Le choix entre mise en page fluide ou fixe dépend de toi et de ce que tu veux faire, du rendu que tu souhaites pour ton site, car la différence est principalement esthétique. Je pense qu'une bonne mise en page fluide demande plus de réflexion qu'une mise en page statique.

Une mise en page fixe assure que l'apparence d'un site sera toujours la même : les blocs de textes auront la même taille, la position des images ne variera pas, etc. Tu gardes donc le contrôle dessus.
Une mise en page fluide doit pouvoir se déformer de manière élégante, ne pas être gênée par le redimensionnement d'un navigateur. Ici, il faut prévoir et tester le comportement du site sous plusieurs résolutions d'écrans, ou dimensions de la fenêtre du navigateur.
Modifié par (21 Apr 2006 - 12:22)

Merci à vous pour ces éléments ^^!

Je n'ai pas encore regardé puisque je viens de voir vos réponses et là je file en pause de midi [*MiamMiamTime* oblige ].

Bref, je ferais un "retour sur information" promis !

Bon appétit!

Ha! Et bien me voilà combler!
Merci à et à dominique pour leurs précieuses aides!

Néanmoins, j'ai encore un petite question [et oui c'était trop beuau ].

Si vous retournez sur l'URL de la maquette où j'ai donc appliqué les connaissances acquises dans le tutoriel, vous verrez que la mise en page gauche droite est pil-poil comme je le voulais... mais je remarque que IE et FireFox ne traite pas le Float éxactement pareil :s [jusque là rien d'éttonant ].

En effet dans le cas présent, j'ai fait "flotter" la première colonne à droite en lui donnant une largeur en pourcentage et j'ai laissé la seconde dans le flux. Ce qui fait que celle de droite habille celle de gauche [si j'ai bien compris ^^].
Normallement j'ai placé des marges externe à droite sur des éléments tel que les paragraphes et les titres de niveau 2 [H2 par la suite] pour éviter l'entassement horizontal du contenu.
Mais la dans ma colonne de gauche ces marges ne sont plus respectées du tout sous Firefox et le sont mal sous IE.
Cad: le soulignement [un "border-bottom: 1px solid #xxxxx" en fin de compte] du H2 touche le soulignement du H2 de l'autre colonne!

J'ai essayer de bidouiller un peu en jouant sur les marges des deux colonnes , ou bien en attribuant une taille à la colonne de gauche [égal à: "100%" - "la taille de la colonne de droite" - 1; le "- 1" est là pour un soucis de compatibilité avec IE ]. Les deux "fonctionnent" plus ou moins bien mais... c'est de la bidouille :s.
J'aimerais savoir si j'ai fait une erreur, et/ou si il y a une solution plus... standart .

En vous remerciant d'avance !

Normal

A première vue et sauf erreur de ma part, ça vient du padding appliqué au h2.

Encadre complètement ton h2 pour te rendre compte de ce qui se passe.
Autre point, si tu veux symboliser un soulignement, ce n'est pas forcemment une bonne idée, celui-ci indique qu'il s'agit d'un lien, ce qui trompera tes visiteurs

Tu peux très bien fixer une largeur à chaque div en "px" et ensuite gérer des marges entre les deux pour avoir l'espacement suffisant... Le résultat sera légèrement décalé en focntion du navigateur...

Edité : J'oubliais, le titre de ton sujet n'est peut être plus adapté, si tu veux le changer, merci d'avance
Modifié par dominique (21 Apr 2006 - 15:16)

Hum c'est juste que le titre n'est plus adapté :x.
J'y ajoute la mention "[Résolu]" en vous remerciant.
Je reposterais sans nul doutes d'ici peu sur un nouveau TOPIC... parce que je compte tenter une mise en page fluide avec des "fonds étirables" :x... ca risque d'être comique lol. Petit chalenge dirat-on ^^!

Merci encore!
Et à bientôt .

a écrit :
Autre point, si tu veux symboliser un soulignement, ce n'est pas forcemment une bonne idée, celui-ci indique qu'il s'agit d'un lien, ce qui trompera tes visiteurs

Ici, il n'y a pas de confusion possible. Le soulignement et sa position mettent en valeur le titre et rendent le contenu plus lisible. On ne devrait même pas parler de soulignement mais de ligne horizontale (hr), car c'est ici ce à quoi ça sert et à quoi ça ressemble.

Oui, tu as peut être raison faudra voir le résultat final...


Ce que je voulais dire pour le titre, Just, c'est que "Alternative au float" ne correspond pas aux réponses qui t'ont permis de résoudre le problème...

Mieux ?