Contenu flottant à largeur dynamique et Contenant

Bonjour à tous,

Cela fait un bon moment que je souffre sur un problème assez bête, j'ai essayé tout un tas de propositions que j'ai pu trouver en parcourant le forum et bien d'autres mais je n'arrive toujours pas à trouver de solution.

La page qui pose problème est ici.http://perso.ovh.net/~davidrod/spip.php?article9

Le site fonctionne sur une idée très simple: les contenus textes+images s'affichent les uns à côté des autres, de la gauche vers la droite. Cela créé un acsenceur horizontal qui permet de voir tous les contenus.

Deux problèmes subsistent:

- Pour le moment, les <div class="docs"> (images + légende en dessous) ne s'affichent les unes à côté des autres (grâce à float:left) que si j'indique à la main une largeur à la <div id="docs_conteneur"> qui les contient. Or mes contenus sont générés dynamiquement, donc je ne peux pas donner une largeur fixe à cette div.

- Lorsque cette <div id="docs_conteneur"> s'élargit, les div qui la contiennent ne s'élargissent pas alors que j'aimerai que les bandes grises se poursuivent jusqu'à la droite des contenus.


J'ai essayé de donner des "width:auto" aux <div class="menu"> sans effet
J'ai essayé de mettre des "overflow:auto" mais cela ne fait que déplacer le problème

Bref, je commence à manquer d'idée et de ressources...

Merci pour tous vos conseils

Bonjour,

les flottant ne compressent pas forcement leur element enfant à la seule largeur de leur contenu (et celui qui m'agace le plus c'est IE7).

Quelques pistes pour tenter : min/max:width/height (bof), display:inline-block;(pas mal a voir et verfier), display:table; (oui mais non ) , display:inline-table; (oui pas mal , mais crossbrowsers ?) ...
reste a se reposer peut-etre sur javascript pour dimensionné la volée les conteneurs flottants .

juste mon avis , car les flottants n'ont pas a la base un comportement de tableau.

GC.

J'ai tenté d'utiliser des min/max width, sans succès

J'ai aussi tenté d'utiliser "inline-block" pour afficher les <div class="docs"> les unes à côtés des autres mais sans succès. Elles finissaient toujours par être envoyé à la ligne du dessous lorsqu'elles devaient sortir de la largeur du contenant.

Pour le javascript, j'imagine bien que c'est faisable, mais je suis pas franchement capable de faire un tel script et je pense, quand même, que ce peut être solutionné purement en HTML/CSS.

Enfin j'espère...

Merci quand même pour les idées.

Finalement personne n'a une petite idée pour solutionner mon problème?

Pourtant, je suis sûr que je dois pas être le premier à m'être retrouvé devant ce soucis...

Si vous avez des idées pour faire autrement, n'hésitez pas non plus. Je serai heureux de vous lire.

Merci d'avance

En continuant de chercher des astuces, j'ai finis par me résoudre à mettre un background-image repeat-x; afin que les bandeaux gris fassent toute la largeur de l'écran.

Par contre, j'ai toujours le soucis de la <div id="docs_conteneur"> qui n'est pas fixe et qu'il faut que j'arrive à calculer, je ne sais comment...

Toutes les idées sont les bienvenues.
Merci d'avance!

Faute de temps, j'ai du trouver coûte que coûte une méthode pour arriver à mes fins.

J'ai donc dû passer par une fonction php afin de calculer la largeur exacte des contenus (Texte+Images+marges internes et externes) pour la donner en attribut width à mon conteneur.
Ainsi on les images se calent parfaitement les unes à côtés des autres puisque la place est suffisante, et le contenant lui même est de la bonne largeur, donc la couleur de fond est bien définit partout.

On ne trouve donc pas un moyen de "pousser" le bord du contenant, mais on lui donne directement la bonne largeur afin que les contenus se calent bien.

Dommage tout de même que personne n'ai pu me donner son avis car je suis persuadé que je devrai arriver à le faire plus facilement, et donc plus joliment, sans passer par le php.

bonjour,

en fait je te lancé un peu sur des pistes ...
par exemples
1 tableau d'une ligne ou
display:table + display:table-cell ou
display:inline-table (+whitespace:nowrap) ou
display:inline-block (+white-space:nowrap)

Si ton script solutionne ton problème , alors c'est parfait , pas besoin de faire de bidouilles.

GC