Question

How can I force .b to shrink to fit next to .a without using tables and without .b wrapping? .a should always display in full.

css:

div{
    width:150px;
    border:1px solid #000;
    overflow:hidden;
}
.a{
    float:right
}

.b{
    float:left;
    overflow:hidden;
    white-space:nowrap;
}

html:

<div><span class='a'>a - text</span><span class='b'>b - some really long text and stuff</span></div>

jsfiddle: http://jsfiddle.net/jcubed111/U56cq/

Answer 1

http://jsfiddle.net/U56cq/16/

Replace float:left with display:block and you’d get what you want. The point is: block in normal flow with overflow:hidden next to block with float would shrink exactly to fit in a space near the floated block.