[Résolu] Forcer la largeur relative à celle du parent ?

Salut,

Je veux séparer une classe en deux colonnes de largeur proportionnelle (un champ constitué d'une liste et un champ pour une description globale de la liste). Je crée donc deux sous-classes :

<div class="main">
  <div class="liste">
     …
  </div>
  <div class="description">
     …
  </div>
</div>

définies ainsi :

.liste
{
        display: table-cell;
        vertical-align: middle;
        width: 35%;
}

.description
{
        display: table-cell;
        vertical-align: middle;
        width: 65%;
}

Ça marche assez bien, sauf quand la description est suffisamment courte pour tenir sur une seule ligne. Dans ce cas le total (35%+65%=100%) ne fait pas 100%, les deux colonnes sont collées.

Je voudrais donc forcer mes colonnes à considérer la taille du conteneur parent, même si le contenu est court.

Quelqu'un voit comment faire ? Ça fait des heures que je bataille pour cette broutille, mais ça me bloque de ne pas parvenir à faire exactement ce que je veux…

J'ai également essayé de passer par un tableau en deux colonnes, mais j'avais le même problème à moins de fixer la width dans le champ table (et non dans la feuille de style), ce qui ne me plaisait pas.

Merci.
Modifié par ze_Morlock (06 Nov 2008 - 11:42)

Il me semble que pour les cellules d'un tableau les largeurs en pourcentages correspondent à un pourcentage de la largeur du tableau, pas du conteneur du tableau. Et la largeur du tableau dépend de son contenu tant qu'on n'a pas demandé explicitement une largeur avec un width: 100% par exemple.

Ici tu n'as pas de tableau mais comme tu utilises display: table-cell les navigateurs en «supposent» un. Il te faudrait donc des largeurs en pixels si ça convient, ou bien un conteneur en display: table et width: 100%.

Florent V. a écrit :
un conteneur en display: table et width: 100%.

Yes !!! Merci pour les explications, c'est plus clair. Et en plus ça marche ! (j'avais essayé un conteneur en table-row mais pas pensé au table-toutcourt…)