Marge et clear: both

A l'aide des z-éclairés conseils des participant de ces forums, j'essaie de transformer une page honteuse/pas propre positionné absolument en page très fière/pas trop sale. J'avance donc, mais j'ai un problème de marge de pied de page. J'ai un entete et quatre colonnes en float dans un conteneur centré. Voici le style du bloc de pied de page :

#footer { 
        width: 800px;
	height: 70px;
	margin-top: 20px;
	clear: both;
	margin-left:auto;
	margin-right:auto;
	background-color: #F2F9F9;
	text-align:center;}

IE6 applique le margin-top, ce qui est curieux car la colonne la plus longue ne précède pas le bloc de pied-de-page dans le flux. Firefox, plus logiquement, il me semble, colle le pied-de-page au bloc le plus long. Puis-je utiliser la propriété margin pour décoller un peu mon pied de page, et comment ? Quelqu'un pourrait m'expliquer la chose ? Mille mercis anticipés.
Ci-dessous l'adresse de la page. L'intégralité des styles est dans le header.

http://www.foutoir.info/test_float2.html
Modifié par ouranos2 (07 Jan 2007 - 06:40)

Bonjour;

Utilise un spacer <hr/> avant ton footer du genre:

	#spacer2{
	height: 50px;
	clear: both;
	color: #e2eff0;
	border: none;
	}

Oui, effectivement je vais m'y résoudre. Mais quelqu'un a l'explication de cette différence de comportement ?

Merci de ton aide.

F.

Salut,

Pour la différence c'est sans doute une histoire de haslayout chez IE

Pour la solution et bien c'est assez simple. Tu veux que le footer se comporte par rapport aux quatre colonnes comme si elles faisaient un tout. pour l'instant ce n'est pas le cas : ton footer est poussé par la colonne la plus longue, donc la colonne 2, et sa marge supérieure tente de s'appliquer au dernier élément dans le flux, donc la colonne 4.

Pour que les quatres éléments block que constituent les quatres colonnes puissent être traités comme un tout on utilise la balise html qui est faite pour ça (regrouper des éléments de type block) et c'est <div> :

<div id="conteneur_colonne">
... ici les 4 colonnes ...
</div>
<div id="footer">contenu footer</div>

Dans un premier temps cela ne semble pas fonctionner. On se trouve dans un cas assez classique de débordement du conteneur par le contenu quand la propriété float est en jeu. Le margin top de #footer s'applique maintenant à #conteneur_colonne mais le bas de ce dernier n'est pas à sa place.

Donc faq :
http://forum.alsacreations.com/faq/faq-6-Comment-eviter-que-mes-elements-flottants-float-depassent-de-leur-conteneur-.html

La vraie solution, complètement explicitée, de ce problème se trouve sur le site de laurent Denis :
Bog & Blues - Float, clear et contextes de formatage

A lire et à bookmarker.
Modifié par clb56 (08 Jan 2007 - 07:54)

clb56 a écrit :
Salut,

Pour la différence c'est sans doute une histoire de haslayout chez IE

Pour la solution et bien c'est assez simple. Tu veux que le footer se
comporte par rapport aux quatre colonnes comme si elles faisaient un tout. pour l'instant ce n'est pas le cas : ton footer est poussé par la colonne la plus longue, donc la colonne 2, et sa marge supérieure tente de s'appliquer au dernier élément dans le flux, donc la colonne 4.

La vraie solution, complètement explicitée, de ce problème se trouve sur le site de laurent Denis :
Bog & Blues - Float, clear et contextes de formatage

Bonjour,
En fait je crois qu'on a ni a faire à un problème liés au contexte de
formatage ni à un cas de haslayout mais simplement à un différence
d'implémentation d'IE qui dans ce cas précis n'es pas conforme aux
spécifications CSS puisque la marge haute ne devrait avoir aucun effet
tant que sa hauteur n'a pas dépassée l'espace supplémentaire
nécessaire au dégagement de l'élement.
Autrement dit, la marge haute devrait se baser sur le haut du conteneur
des flottants ou plutôt dans ce cas sur le dernier élément en flux dans le code : l'en-tête.
Donc dans ce genre de cas de figure il faut toujours donner
une marge basse à (aux) l'élément flottant plutôt qu'une marge haute
à l'élément dégagé (le footer):

La solution de cbl56 est bonne mais tu peux aussi bien déclarer:

#colonne1, #colonne2, #colonne3, #colonne4 {float:left; margin-bottom:20px}

Et ça fonctionnera sans introduire de balisage supplémentaire.
Modifié par Hermann (08 Jan 2007 - 12:52)

Merci de ces explications. J'ai bien compris l'interprétation erroné de IE, que j'avais intuité (mais effectivement, je n'avais pas réalisé que la marge devrait s'appliquer à l'entête et non au dernier flottant du flux).
Pour le moment, je vais laisser tomber les contextes de de formatages, cela me semble plus compliqué. mais cela pourra servir un jour. Un spacer fonctionne évidemment bien, mais je vais tester la marge-bottom pour le dernier flottant, c'est plus propre ... ;o)

Merci à vous deux.

F.

Correction : margin-bottom, pour tous les flottants, j'avais bien compris, c'était une coquille
Modifié par ouranos2 (11 Jan 2007 - 20:23)