Categories
Webstandards

Une nouvelle solution aux problèmes de float fait surface

Créer des colonnes avec des blocs flottants est devenu courant mais le problème du clear n’a jamais vraiment trouvé de solutions simples (<hr /> ou <br />, :after, etc.). Voilà qu’un article sur Sitepoint évoque une méthode de Paul O’Brien pour éviter ce genre de manipulation. La solution est d’une telle simplicité et logique que je me demande comment personne n’y a pensé plus tôt.

Il suffit de spécifier la propriété overflow:auto sur le bloc conteneur et celui-ci s’agrandit automatiquement si un des ses fils flottant est trop grand. Après un test rapide dans Firefox, Internet Explorer et Opéra, la technique semble fonctionner correctement. Je pense qu’il faudra tester cette méthode dans d’autres conditions pour voir s’il n’y a pas d’effets secondaires mais si tout se passe bien, ça risque de simplifier pas mal de documents.

Edit: Comme le fait remarquer Ganf, cette technique est risquée. Dans la spécification, rien n’explique vraiment pourquoi cela fonctionne. À utiliser avec beaucoup de précautions donc.

13 replies on “Une nouvelle solution aux problèmes de float fait surface”

Harg…

effectivement c’est tout simple… si ça marche dans quasiment toutes les conditions, alors c’est le rêve… 😀

Bonne solution ? ça dépend. Est-ce un effet de bord des implémentations actuelles ou est-ce une conséquence normale des specs ? J’ai peur que ce soit un simple effet de bord, qui est ni plus ni moins qu’un bug.

Si c’est le cas, pourquoi est-ce une mauvaise solution ? – un navigateur “correct” et implémentant bien CSS risque de se gauffrer. Même si on n’en a pas actuellement on risque d’en avoir dans le futur – un navigateur risque un jour de corriger le bug (volontairement ou en tant qu’effet de bord d’un autre truc), et personne ne pourra lui reprocher – on utilise des choses non documentées, non spécifiées, en les rendant nécessaires à la lecture correcte de la page.

On revient à faire la même chose que tous ceux qui se sont basés sur des Bugs de MSIE pour faire leur mise en page ces dernières années au lieu de coder conforme aux recommandations (par exemple sur le box model d’IE). Dès que les implémentations majoritaires changent, soit les sites se cassent la gueule sur les nouvelles implémentations, soit on oblige les nouvelles implémentations à refaire les mêmes bugs non documentés pour faire passer les anciens sites (sauf que là on n’aura plus de doctype switching pour corriger le tir).

Le “ça marche donc c’est bien” est un *très* mauvais plan à long terme, tous ceux qui ont peiné devant des sites “IE-only” me comprendront.

Je penche aussi a priori pour l’effet de bord, dont la permanence dans de futurs navigateurs n’est pas garantie : à propos d’overflow:auto, CSS2 déclare en effet que “l’interprétation de cette valeur dépend de l’agent utilisateur, cependant, celui-ci devrait fournir un mécanisme de défilement quand les boîtes débordent.” La question est à creuser dans la spec.

lol

Ce serait alors un bel exemple du rôle et de l’utilité de CSS2.1 (modifier CSS2.0 en fonction des implémentations réelles).

Cela dit, il ne reste plus qu’à trouver commenr réaliser l’opération complémentaire : forcer une (courte) colonne flottante à avoir la hauteur du (long) flux qui se place à côté d’elle 😉

Solutions au probl? de ‘sortie de bo?’ des ?ments flottants en CSS

Tous ceux qui ont un jour mis le doigt dans la cr?ion d’un design en CSS connaissent ce probl?. Lorsqu’un ?ment flottant est plus grand que son conteneur, il sort de ce dernier. Ce qui est du plus mauvais effet (sauf dans le cas du navigateur…

Pour les problèmes de float, le mieux restent d’appeller la Générale des Eaux.

——>[] (très très loin)

on peut aussi définir un margin-left sur le 2eme div.
mais d’une maniere plus générale, je pense qu’il n’y a pas de probleme float, mais plutot un gros probleme ie …

Comments are closed.