Comment ajuster ajuster la largeur de 2 éléments côte à côte pour s'adapter au conteneur

Question

J'ai 2 divs à l'intérieur d'un autre div. Les deux divs internes affichent du texte, qui est généré par mon application. La longueur du texte varie. Existe-t-il un moyen de forcer un div interne, disons le premier, à remplir l'espace laissé par le second div interne?

Si cela semble cryptique, prenez l'exemple ci-dessous ... la largeur de la zone de score varie en largeur en fonction de ce qui est affiché .. 0% étant courte, 100% étant longue ...

Comment faire Je m'assure que le bouton sur la gauche remplit l'espace laissé pour faire les choses bien dans la boîte bleue.

Answer 1

La meilleure façon que je connais de le faire avec des largeurs variables est d'utiliser des tables faux:

<div id="stuff"> 
<div id="name">Jesse James</div> 
<div id="percent">100%</div> 
</div> 


#stuff { display: table; width: 200px; } 
#stuff #name { display: table-cell; width: 100%; background: gray; } 
#stuff #percent { display: table-cell; background: red; } 

http://jsfiddle.net/chovy/HMnSq/