Как разместить два div рядом, где LEFT один имеет размер, а другой занимает оставшееся место?

У меня это есть, за исключением того, что когда есть пустое место, мой правый div ест его (с текстом, выровненным по правому краю). Вы не указываете это как вопрос, поэтому я не был уверен, что это именно то, как вы это нарисовали? Поиграйте здесь: http://jsfiddle.net/mdares/fSCr6/

HTML:

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
    <div class="right">other Text ttt</div>
</div>

CSS:

.container {
    width: 600px;
}
.left {
    max-width: 100%;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
}

И наконец:

За исключением ширины контейнера, которая может быть определена в%, вот решение. Единственная работающая трещина заключалась в том, чтобы поставить фон контейнера как у дочернего.

иначе последнее условие действительно трудно достичь :) Просто быть правдой.

Вот ссылка на скрипку

ширина скрипки

Вот css

.container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
    background-color:red;
}
.left {
    width:auto;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
    position:absolute;
    max-width:inherit;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
    width:auto;
    float:right;
}

Посмотрите, подходит ли он. Последнее условие действительно сложное, если у кого-то есть другое решение для последнего изображения, которое вы вставили, пожалуйста, поделитесь :)