Les flottants font de la magie !

A force de chercher des solutions pour simuler des "colonnes" de même hauteur en CSS, on trouve des bugs assez pittoresques avec IE (est-il utile de le préciser ?).

Le but du jeu est simple : je veux un contenu, une partie à gauche de ce contenu et un pied de page en-dessous de tout ça, le tout dans un conteneur global. Une mise en page bien classique en somme.

Je procède donc ainsi, le plus logiquement du monde :

  • Je donne une couleur de fond à chacun de mes blocs, pour les distinguer clairement.
  • Je positionne mon bloc gauche en flottant (à gauche, si si) et je lui donne une largeur de 10em.
  • J'applique à mon bloc de contenu une marge gauche de 11em.
  • Je place mon pied de page (footer) en-dessous de tout ça et je m'assure de sa position en-dessous du bloc gauche à l'aide d'un clear left.

Le résultat visuel est assez surprenant sur IE6 :

Aperçu Mozilla :
apercu Mozilla
Aperçu IE :
apercu IE

Pas de surprises sous Mozilla, par contre sur IE le contenu s'est carrément volatilisé, comme par magie !

Et pourtant, il n'a pas complètement disparu : il reste tout à fait sélectionnable à la souris et se dévoile petit à petit lorsqu'on le sélectionne.

Ce comportement est assez déroutant. Le bug apparaît sur IE version 6. Je ne sais pas ce qu'il en est des autres versions.

Tout cela est bien dommage pour une mise en page aussi classique et conventionnelle que celle-ci... et ça me conforte dans mon allergie aux positionnements flottants :-p

Voici le code pour les intéressés :

#global {
background: yellow;
}
#contenu {
background: blue;
margin-left: 11em;
}
#gauche {
width: 10em;
float: left;
background: red;
}
#footer {
clear: left;
background: green;
}
p {margin:0}

<div id="global">

	<div id="gauche">
	<p>gauche</p>
	<p>gauche</p>
	<p>gauche</p>
	<p>gauche</p>
	<p>gauche</p>
	</div>

	<div id="contenu">
	<p>contenu</p>
	<p>contenu</p>
	<p>contenu</p>
	</div>

	<p id="footer">footer</p>

</div>

Par Raphael GOETTER - dimanche 8 août 2004 à 18:20

Standards et Accessibilité - #48 - Lu 9943 fois - Intérêt du billet: 2.25(8) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le dimanche 8 août 2004 à 18:42, par ElMoustiko :: site :: #

Personnelement, je m'en sors très bien avec les flottants, toujours avec quelques soucis dû à IE mais contournable tout de même. Ma méthode utilise une petite bidouille, j'en conviens, mais moi c'est au positionement absolu que je suis allergique ^^ J'ai pourtant essayé le plus serieusement du monde, pour un design (pas pour moi, ce qui renforce le serieux du travail) et incapable de faire quoi que ce soit de correct.

Ma méthode pour ce type de mise en page :

conteneur global (pas obligatoire mais souvent bien pratique pour l'application d'un design), header, menu, page, footer et avant le footer il me faut ajouter un div <div class="espace">&nbsp;</div> pour permettre d'étendre complétement le conteneur, en appliquant un clear: both; à div.espace (c'est la bidouille dont je parlais), technique bien connue (dont je ne suis bien evidement pas l'inventeur ! ). Et ensuite je fait flotter a gauche le menu et à droite ou gauche (peu importe, sauf dans certains cas) la page et zou, c'est fini, mais il faut préciser des largeurs aux elements, donc pour ce qui est des margin/padding, on rencontre les soucis dû à IE, contournable a coup de hack (un par page grosso modo) ou en mettant les marges et padding aux elements contenu (assez penible).

Pour un détail du code, voir mon blog (site dans la "signature" du message que vous lisez actuellement)

@++

Le lundi 9 août 2004 à 01:28, par mauriz :: site :: #

J'avais eu le même problème, mais je ne sais plus comment je l'avais contourné, peut-être avec des z-index.

Le lundi 9 août 2004 à 01:40, par ElMoustiko :: site :: #

Avec des z-index ? ca voudrait dire que tu utilisais le positionement absolu (ou relatif) donc que la mise en page en flottant n'etait pas de mise me semble t il non ?

Le lundi 9 août 2004 à 09:00, par Benoit F. :: #

C'est un bug avec lequel j'ai déjà été confronté à plusieurs reprises.
Si je me rapelle bien j'ai rajouté un "width: 100%" à l'élément englobant ici #global, l'élément contenu a ainsi réaparu.

Le lundi 9 août 2004 à 09:48, par Janusz :: site :: #

J'ai déjà eu l'occasion de constater ce problème.
Pour ma part, j'ai préféré déplacer le contenu dans un menu/colonne de gauche.
Benoit F., merci pour l'astuce que je testerai à l'occasion, car il est pénible de se passer de cette possibilité.

Si ça vous tente, j'ai un autre problème à vous soumettre :
Dernièrement, j'ai voulu utiliser l'affichage de mes colonnes par l'unité "em"
L'idée générale c'est par exemple une colonne principale à 51em comme cela, si l'on augmente la taille de l'affichage, l'ensemble colonne et texte suit automatiquement.
Comme d'habitude, Firefox fonctionne sans problème, mais sous ie, mon menu de droite se retrouve au fin fond de la page (voir mon site, dans la rubrique weblog).
Après de nombreux essais infructueux, j'ai donc dû repartir à l'état initial (largeur par "px").

À l'heure actuelle, j'ai 2 possibilités :
* ou j'essaie de forcer l'affichage par l'utilisation d'un hack réservé à ie.
* ou je change mon fusil d'épaule en préférant une largeur à 100%, comme cela plus de problème de largeur de colonne. Mais ça veut dire un changement de mentalité.

Et vous, avez-vous une autre proposition ?

Le lundi 9 août 2004 à 16:21, par Laurent Denis :: #

@Janusz > Définir une largeur en em nécessite de laisser du "jeu" afin de gérer les inévitables différences de largeur finale dans les navigateurs, à cause du box model IE (probablement la cause de ton problème), mais aussi parce que la largeur résultante dépendra aussi de la police de caractère effectivement utilisée par le navigateur. Or :
- les polices varient en espace horizontal occupé : Verdana est plus "large" qu'Arial, etc;
- rien ne te garantit que tes polices seront présentes chez tous les utilisateurs, ou respectées par leurs configurations spécifiques...

Si tu veux revenir à ta colonne principale à 51em, il faut donc veiller à lui laisser "beaucoup de place" sur les côtés ;)

Le lundi 9 août 2004 à 16:35, par Laurent Denis :: #

@Raphael> Pour info, ce bug n'affecte pas IE5.x Win, et la solution classique est, comme l'a indiqué Benoit, de dimensionner l'élément conteneur.

Le mardi 10 août 2004 à 08:38, par Laurent Denis :: #

J'oubliais hier de citer www.evolt.org/article/MSI... qui documente ce bug et propose une autre solution...

Le jeudi 19 août 2004 à 12:35, par Chadom :: site :: #

J'ais eu ce pb avec des float:right. La solution trouvée fonctionne ici aussi : ajouter "position: relative;" a #global et #gauche.

Cf. http//qsdqsd.free.fr/Articles/MSIE6_CSS_bug_float_right/index2.html">qsdqsd.free.fr/Articles/M...

Le dimanche 3 octobre 2004 à 21:44, par Raphael :: site :: #

A propos des différences de comportement entre IE et les autres navigateurs, voici un lien sympa :
rss.zdnet.fr/builder/prog...

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.