CSS two columns dynamic width

Question

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

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

If there is not enough space, I want the right content to occupy the width it needs, while the left content should occupy the remaining available width (with overflow hidden to save one line).

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

Any hint? Thanks

Answer 1

Give it a whirlwind:

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> 

Answer 2

The float should work only one of the columns.

 .left { float: left; } .right { overflow: hidden; padding-left: 20px; } 

See updated fiddle