[resolu] Deux colonnes à largeur libre dans un conteneur fixe

Salut.

J'ai un problème que je n'arrive pas à résoudre tout seul alors je fais appel à vous.

J'ai un conteneur de largeur fixe qui contient deux div de largeurs variables (en fonction du contenu).
Je veux qu'à eux deux ils remplissent entièrement le conteneur parent sans le dépasser.
Dans le cas où à eux deux ils seraient plus grand que le conteneur parent il faudrait que ce soit le conteneur enfant de droite qui soit affiché entièrement et celui de gauche qui se voit coupé (overflow: hidden;)

Seulement rien à faire je n'arrive pas à gérer ce genre de priorité

Un schéma pour y voir plus clair:


Donc en gros : Le nombre de colonnes jaunes et lignes noires est variable. Les colonnes jaune, de largeur fixe, doivent toutes apparaitre en entier.
Le conteneur bleu prend la place qu'il reste et les lignes noires prennent la tailles qu'elles veulent mais sont en partie cachées par le overflow: hidden du conteneur vert.

Un idée ?

Moi je me bats avec des display: table, inline-cell, etc. J'ai essayé avec un float left et un float right...
Rien à faire... Le seul truc qui marche c'est quand je limite la taille du conteneur bleu (avec un max-width) mais si le nombre de colonnes jaunes devient trop important elles sont poussée sur la droite, en dehors du conteneur parent (rouge).

Merci

Edit: Ce que j'ai oublié de préciser, c'est que je veux que ça fonctionne sous Safari, c'est tout. Pas besoin que ce soit compatible avec les autres navigateurs
Modifié par Havrest (29 Jul 2009 - 01:52)

Hello,

La demande me semble très précise et spécifique, et demande à priori des ajustements circonstanciels bien particuliers... je doute qu'il soit possible de la réaliser.

On peut éventuellement s'en approcher. Je n'ai pas le temps de me pencher dessus en détail, mais il me semble qu'il faudrait placer le bloc vert en premier dans le flux, le bleu en deuxième, et les faire tous les deux flotter à droite. Il faut alors les placer tous les deux dans un conteneur de largeur importante (pour empêcher le retour à la ligne du bloc bleu), dont le bord droit devra être aligné à droite du conteneur rouge (là comme ça je dirais du display:inline-block et du text-align:right).

Ça fera déjà une bonne base...

Je savais que je demandais au bon endroit
J'ai réussi à obtenir le résultat attendu sur la page de test, ça devrait fonctionner sur ma page réelle. (du moins je l'espère ^^ )

Ma page de test pour ceux que ça intéresse :

<div style="width: 320px; overflow: hidden; border: 2px solid red;">
      <div style="width: 1000px; display: inline-block;">
        <div style="border: 2px solid green; float: right; white-space: nowrap; margin-right: 680px;">
          Integer est eu Pellentesque fames
        </div>
        <div style="border: 2px solid blue; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
          Lorem ipsum dolor sit amet Consectetuer ligula at Pellentesque quis Quis ipsum urna quis tellus
        </div>
      </div>
    </div>

Ce qui donne:

(j'ai juste rajouté un margin: 1px pour qu'on dissocie bien les bordure sur l'aperçu)


Encore merci


Edit:
Juste par hasard, car c'est encore plus spécifique que ci-dessus, est-il possible d'appliquer le text-overflow à un élément en se servant du overflow de son parent ? (c'est pas super clair en plus )
Pour être un peu plus clair, les lignes noires n'ont pas de limite de taille mais sont "coupées" par l'overflow du div bleu mais le text-overflow n'agit pas puisque la ligne n'est en théorie pas "coupée".
Modifié par Havrest (29 Jul 2009 - 01:56)