製作一個div使用所有可用的空間在容器

Question

我有兩個元素這個div容器：

<div id="container"> 
    <div id="right">Some, list, of, words, that, I, use</div> 
    <div id="left">Person Name</div> 
</div>​ 

我想讓#right DIV使用了由該留下的空間#left div並隱藏溢出。

請注意，＃left div的寬度是可變的。

我想出了這個CSS至今：

#container { 
    width: 250px; 
    border: 1px solid black; 
    padding: 10px; 
} 

#left { 
    white-space: nowrap; 
    border: 1px dotted #ccc; 
    display: inline; 
} 

#right { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    border: 1px dotted #ddd; 
    white-space: nowrap; 
    display: inline; 
    float: right; 
} 

但#right格仍顯示的所有文字，最終以下行，像下面顯示：

我玩弄#right div不浮動，增加width: 100%但似乎沒有任何工作。 ..

有誰知道我可以如何使兩者都顯示在同一行，但使#right div有其溢出隱藏？

的jsfiddle鏈接：http://jsfiddle.net/y4xnx/13/

編輯：固定我的解釋，其中的div應該做的事情。

Answer 1

這將有助於把#left前#right：

<div id="container"> 
    <div id="left">Person Name</div> 
    <div id="right">Some, list, of, words, that, I, use</div> 
</div>​ 

然後在CSS中的幾個變化應該做你想要什麼：

#left { 
    white-space: nowrap; 
    border: 1px dotted #ccc; 
    float: left; 
    margin-right: 5px; 
} 

#right { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    border: 1px dotted #ddd; 
    white-space: nowrap; 
} 

例子： http://jsfiddle.net/grc4/MvXuN/

Answer 2

我試圖實現我從你的問題中理解的任何東西。檢查這裏的小提琴：http://jsfiddle.net/y4xnx/20/

HTML：

<div id="container"> 
    <div id="left">Person Name</div> 
    <div id="right">Some, list, of, words, that, I, use</div> 
</div>​ 

CSS：

#container { 
    width: 250px; 
    border: 1px solid black; 
    padding: 10px; 
    white-space:nowrap; 
    overflow:hidden; 
} 

#left { 
    border: 1px dotted #ccc; 
    display: inline-block; 
} 

#right { 
    display:inline-block; 
    border: 1px dotted #ddd; 
} 
​