Alignement horizontal de blocs de taille variable

Bonjour,

Rentrons dans la vif du sujet : tout d'abord un schéma pour y voir plus clair
http://img175.imageshack.us/img175/3015/schemaalignementrt5.png

Le principe est simple, et il est très facilement reglé avec une mise en page en tableaux. Sauf que bien sûr, je voudrais éviter pour des raisons évitons de sémantique.

Contrainte supplémentaire (implicite sur le schéma) : les deux blocs doivent faire la même hauteur

Le positionnement ne fonctionne pas car je ne peux pas manipuler les largeurs de mes blocs : le bloc principal a une largeur en %, et le premier sous-bloc (de gauche) a une largeur en em. Impossible donc de dire au navigateur que le bloc de droite fait X%-Yem afin de positionner les blocs en relatif ou absolu. De toute façon avec cette solution se poserait le problème de la hauteur.

Les flottants ne fonctionnent pas non plus, car si jamais mon bloc de droite est trop petit, je n'occupe pas tout l'espace (hors je veux occuper tout l'espace). De plus en utilisant des flottants je n'ai plus de hauteur, et le bloc principal se retrouve avec une hauteur nulle.

J'ai bien la possibilité de mettre le bloc principal en display:table, et les deux sous-blocs en display:table-cell. ça marche nickel, sauf qu'IE ne supporte pas ces valeurs pour display.

Pour le moment je me suis donc rabattu sur un tableau, ai-je un moyen de faire autrement ?

Salut !

Problème classique dont la réponse se trouve dans les FAQs.
Modifié par Ralfman68 (08 Oct 2006 - 03:41)

Mouais, aucune solution satisfaisante donc, entre rajouter une poignées de DIVs et utiliser un tableau à 2 cellules, je préfère encore le tableau.

La dernière solution de cette page solutionnit le problème, mais en ajoutant un faux layer, et une bordure simulée par une image de fond. Ce n'est pas un troll mais bon, bonjour le bordel et la maintenabilité du code :lol:

Bonjour,

L'amusant, c'est que c'est une parfaite illustration de la notion de séparation structure/présentation et de la stratégie possible dans ce domaine.

- j'ai besoin d'une présentation typiquement "tableau" (la gestion des hauteurs identiques, sans concession dans IE sous forme de gracefull degradation).
- je pourrai le faire en CSS avec le display:table (and Cie), mais celui-ci n'est pas implémenté par le principal navigateur actuel, et ne le sera pas apparemment par sa prochaine version 7.0.
- je pourrai ruser et utiliser le display: inline-block, mais son principal concurrent ne l'implémente pas encore.
- donc, je fais un tableau HTML, sans remords, sans hésitation, et sans inaccessibilité... si je le fais proprement et de manière valide, je pourrai le moment venu traiter automatiquement les pages en question pour éliminer ces <table> via XSLT, par exemple.

Je peux donc parfaitement faire un code robuste et évolutif. Je suis un webmestre heureux, en fait
Modifié par Laurent Denis (08 Oct 2006 - 11:52)

Oui je trouve aussi que je suis tombé sur un cas d'école illustrant parfaitement la schyzophrénie latente menaçant tout webmaster qui souhaite faire du "valide + crossbrowser + pas trop inaccessible + exactement conforme au design fourni par le client"...

En tous cas si ton message n'était pas ironique (je n'en ai pas l'impression, et je ne l'espère pas ) ton commentaire me rassure.

Bonjour,

non, rien d'ironique. Les tableaux sont simplement encore utiles parfois, et ne sont pas forcément synonymes d'inaccessibilité