Making a div use all the space available in a container - html

Question

I have this container div with two elements:
<div id="container">
<div id="right">Some, list, of, words, that, I, use</div>
<div id="left">Person Name</div>
</div>​
And I want to make the #right div use up the space that is left by the #left div and hide the overflow.
Please also note that the #left div width is variable.
I came up with this css so far:
#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;
}
​
But the #right div still shows all text and end up on the following line, like displayed below:
I played with making the #right div not float, adding width: 100% but nothing seems to work...
Does anyone know how I can make both be displayed on the same line, but making the #right div have its overflow hidden?
jsFiddle link: http://jsfiddle.net/y4xnx/13/
Edit: fixed my explanation of which divs should do what.

Answer 1

It would help to put #left before #right:
<div id="container">
<div id="left">Person Name</div>
<div id="right">Some, list, of, words, that, I, use</div>
</div>​
Then a few changes in the css should do what you're wanting:
#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;
}
Example: http://jsfiddle.net/grc4/MvXuN/

Answer 2

I tried to achieve whatever I understood from your question. Check the fiddle here: 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;
}
​