Заставить плавающие элементы сокращаться с помощью CSS

Question

Как заставить .b сжаться, чтобы соответствовать размеру .a без использования таблиц и без переноса .b? .a всегда должен отображаться полностью.

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/

Замените float:left на display:block, и вы получите то, что хотите. Дело в том, что блок в нормальном потоке с overflow:hidden рядом с блоком с float будет точно сужаться, чтобы поместиться в пространство рядом с плавающим блоком.