Taillage automatique de DIV

Bonjour,

Mon souci est le suivant :
J'ai un élément UL qui possède une taille fixe (982px). A l'intérieur je souhaite "empiler" des DIV avec un float:left. Jusque la, pas de soucis. Mais la ou je n'arrive pas a faire ce que je veux, c que j'aimerai que ces DIV se taillent automatiquement de façon à ce qu'elles remplissent l'intégralité de mon UL.
Par exemple, si je n'ai que 3 DIV, elles seront relativement grandes, mais si j'en ai 6, elles le seront moitié moins.
J'ai tenté de mettre un width:auto sur mes DIV, mais cela ne fait pas ce que je veux, elles se taillent en fonction du texte contenu (ce qui parait logique).
Alors, comment puis je faire pour que mes DIV soient "intelligentes" et qu'elles se retaillent automatiquement en fonction de leur nombre ?

Un float nécessite une dimension fixe sinon il va prendre le "plus petit" possible et non pas s'adapter à largeur de ton parent.

La seule solution que je connaisse qui fait exactement ce que tu veux c'est le display:table et display:table-cell mais qui n'est évidemment pas supporté par tous les navigateurs.

Merci Sorano pour cette réponse rapide.
Par contre, le fait que çà ne fonctionne pas sous tous les navigateurs ne m'arrangent guère...
Je vais tenter de mettre en place ta solution.

Edit : Bon ben après avoir testé, çà ne fonctionne pas
Modifié par Leon68 (28 Oct 2010 - 15:32)

Bonjour,

Leon68 a écrit :
J'ai un élément UL (...). A l'intérieur je souhaite "empiler" des DIV (...). Jusque la, pas de soucis.

Tu as des DIV directement dans un UL, et ça ne te pose pas de souci? Ah ben si, là il y a un problème. L'élément UL n'accepte que LI comme enfant. Pense à valider et si besoin corriger ton code HTML.

Leon68 a écrit :
c que j'aimerai que ces DIV se taillent automatiquement de façon à ce qu'elles remplissent l'intégralité de mon UL.
Par exemple, si je n'ai que 3 DIV, elles seront relativement grandes, mais si j'en ai 6, elles le seront moitié moins.

Les solutions CSS consistent à utiliser soit display:table (CSS 2.1), soit display:box (CSS 3). Le premier est plus largement supporté: seul le vieux IE7 ne le supporte pas, parmi les navigateurs actuels. Mais le cas IE7 peut se traiter en dégradation gracieuse, par exemple ainsi:

ul#test {
  display: table; /* IE7 ignorera "table" et utilisera la valeur par défaut, "block" */
  width: 982px;
  text-align: center;
}
ul#test li {
  display: inline; /* Pour les navigateurs qui ne comprennent pas table-cell */
  display: table-cell;
}

Florent V. a écrit :


Tu as des DIV directement dans un UL, et ça ne te pose pas de souci? Ah ben si, là il y a un problème. L'élément UL n'accepte que LI comme enfant. Pense à valider et si besoin corriger ton code HTML.

Autant pour moi, j'ai évidemment des LI dans mes UL, et les DIV sont dans les LI.

Florent V. a écrit :

Les solutions CSS consistent à utiliser soit display:table (CSS 2.1), soit display:box (CSS 3). Le premier est plus largement supporté: seul le vieux IE7 ne le supporte pas, parmi les navigateurs actuels. Mais le cas IE7 peut se traiter en dégradation gracieuse, par exemple ainsi:

ul#test {
  display: table; /* IE7 ignorera "table" et utilisera la valeur par défaut, "block" */
  width: 982px;
  text-align: center;
}
ul#test li {
  display: inline; /* Pour les navigateurs qui ne comprennent pas table-cell */
  display: table-cell;
}

J'ai presque réussi à faire ce que je voulais en creusant le display:table et display:table-cell. Le seul truc qui me reste à régler, c'est que j'aimerai que si je n'ai qu'une div, celle ci prenne la totalité du width fixé. Or c'est pas le cas, elle s'auto dimensionne mais ne prend pas tout. Par contre, une fois que l'ensemble de mes DIV prend la totalité alors la, ca s'auto dimensionne correctement..

Par contre, merci pour l'info concernant le display:inline pour les navigateurs qui ne connaissent pas le table-cell, ca va me servir.

Leon68 a écrit :
Autant pour moi, j'ai évidemment des LI dans mes UL, et les DIV sont dans les LI.

Et tu as vraiment besoin de ces DIV, ou bien mettre en forme les LI peut suffire?
Parce que si on peut simplifier le code, c'est toujours bon à prendre.

Si tu as besoin de ces DIV (ou d'éléments SPAN ou A ou autre), évite de les mettre en float:left, hein. Le problème que tu décrivais ensuite ressemble à ce cas de figure, comme si tu avais oublié d'enlever le float:left que tu avais testé au départ.

On pourrait t'en dire plus en voyant le code ou carrément la page, ainsi qu'un aperçu du rendu souhaité.

Effectivement, j'avais un float:left dans mes elements, mais suite a la reponse de Sorano, je l'ai enleve.

Bonne remarque concernant l'utilisation des DIV. Mais leur presence est due au fait qu'au depart, je les empilais par un float:left. Maintenant que je l'ai enleve, je peux enlever les DIV et conserver mes LI, tu as raison.

Je te tiens au courant et posterai mon code en cas de besoin

Merci de ton aide en tout cas