Question

I have a single-line div with content on the left and on the right:

---------------------------------------------------------------------------
|Single line of text                          Icon and single line of text|                                                
---------------------------------------------------------------------------

If there is no enough space I want the right content to take the width it needs while the left content should take the rest of the available width (with overflow hidden to keep a single line).

The problem is that the content (left & right) is dynamic, so I do not know its width in advance.

Any hint? Thanks

Answer 1

Give this a whirl:

http://jsfiddle.net/thirtydot/fjJMX/191/

CSS:

#lineContainer {
    overflow: hidden; /* clear floats */
    outline: 1px solid red;
    width: 300px /* just to make demo easier */
}
#lineLeft {
    overflow: hidden; /* hide extra text */
    white-space: nowrap;
    background: #f0f

}
#lineRight {
    float: right;
    background: #ccc
}

HTML:

<div id="lineContainer">
    <div id="lineRight">right right right right right</div>
    <div id="lineLeft">left left left</div>
</div>