How to make 2 divs inline, with width depending on the content

Question

I have a bar divided into 2 parts, one contains text, second one is some kind of breadcrumbs. Both elements must be inline.

The trick is that left div will need to have flexible content, while the right one should left-adjust to the left one:

----------------------------------------------------------------------------------
|long text long text long text long text| <...breadcrumb navigation...>          |
----------------------------------------------------------------------------------

when screen gets schrinked down to, for example 700px width, left div should take let's say 30% of the bar. If text is to long, it should get trimmed with overflow:hidden:

-------------------------------------------------------
|long text long text...| <...breadcrumb navigation...>|
-------------------------------------------------------

If text is short though, it should look like this:

----------------------------------------------------------------------------------
|short text| <...breadcrumb navigation...>                                       |
----------------------------------------------------------------------------------

And on screen resize 30% width won't be necessary:

-------------------------------------------------------
|short text| <...breadcrumb navigation...>            |
-------------------------------------------------------

I have tried several approaches including display:table-cell, but the result was:

----------------------------------------------------------------------------------
|short text                             | <...breadcrumb navigation...>          |
----------------------------------------------------------------------------------

Last one that almost worked was float: left, but in this case overflow:hidden wasn't working, the text was either pushing the whole layout oustise window screen or jumping to the next line.

Anyone has any idea how can this be sorted out in the easiest possible way, preferrably without js? Thanks

Answer 1

Float your left div left, set a max-width, and set it's white-space to nowrap.

.left, .right { overflow:hidden; white-space:nowrap; }
.left { max-width:30%; float:left; background:green; }
.right { background:red; }

<div class="left">asdf asdfasdf asdfasdf asdfasdf asdfasdf asdfsadfa asdfasdf asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfas as</div>
<div class="right">asdfasfasdfasdfsafdsadf</div>