How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

Question

I\'m trying to place two div\'s beside each other with the following criteria:

1. Both divs must stay on the same line.
2. Priority mus

Answer 1

Except the container width That can be defined in % here's a solution. The only crack that worked was putting container backgroud as that of child one.

or else the last condition is really hard to achieve :) Just being True.

Here's the fiddle link

width fiddle

Here's the 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;
}

See to it if it fits . Last condition really tough if some one has another solution to the last image you pasted then please share :)