Conseil logique : float ou construction tabulaire ?

Bonjour,

Je m'interroge sur la meilleure manière de procéder pour organiser un conteneur, que voici :
http://www.heberger-image.fr/data/images/11633_schema.png

Voilà le problème : il faut que ce conteneur soit extensible en hauteur, à partir du contenu de C, et que les listes contenues dans D et E s'adaptent.

Etant donné que je voudrais éviter de passer par un tableau, j'hésite entre deux solutions: les float, ou passer par un modèle de construction tabulaire (display).

Je voudrais bien entendu que la compatibilité soit maximale avec tous les navigateurs.

Auriez-vous quelques conseils à ce sujet ?

Merci d'avance

Bonjour,

Difficile de te répondre, en excluant systématiquement un vrai tableau, sans savoir quel type de contenu tu veut mettre en forme. Il est possible qu'un tableau soit finalement bien adapté a ta structure HTML.

Avec float, tu n'auras pas le résultat escompté sans une pincé de js en plus.

avec display , tu réduis la compatibilité aux navigateurs récents (en gros tu exclu IE6/7), mais tu est obligé de rusé avec une fluidité partielle et le risque de tout voir s’écroule d'un navigateur à l'autre.

Via CSS, du rowspan ou du colspan c'est totalement exclu .

++

gc-nomade a écrit :
avec display , tu réduis la compatibilité aux navigateurs récents (en gros tu exclu IE6/7), mais tu est obligé de rusé avec une fluidité partielle et le risque de tout voir s’écroule d'un navigateur à l'autre.

Oui enfin... cela veut dire qu'il se priverait de 0,7% d'utilisateurs potentiel. Autant dire rien. Je rappelle que ces navigateurs ne sont officiellement plus supportés par les grands sites, comme Facebook, Dailymotion, les produits Google (comme Google calendar), etc.

Quand à l'histoire de voir "tout s'écrouler d'un navigateur à l'autre"... je ne vois pas. La règle "display: inline-block" est très bien pour ce genre de cas, ou mieux encore : "display: table-cell" (j'utilise ces règles depuis un moment : aucun problème). Pour l'utilisation de ces règles, je vous laisse consulter la doc.
Modifié par Olivier C (24 May 2013 - 00:02)

@Olivier joue avec ceci dans differents navigateur http://dabblet.com/gist/5624549
ajoute, enlève des éléments, du contenu, redimensionne la fenêtre, etc ...

Je parlais de display:table, car pour les autres ou float, il faut en passer par js pour redistribuer hauteurs et largeurs.<edit : display:table(-x) , car c’était ce dont parlais l'auteur de ce fil />

Cdt,
Modifié par gc-nomade (24 May 2013 - 00:49)

salut,
C'est clair que même avec un display:table c'est assez délicat. Cela dit en CSS pur rien d'autre ne pourra te donner le résultat que tu souhaites mais comme dit précédemment, tu dépendra des algo de calcul des navigateurs.