Я пытаюсь сделать внутренний div с шириной жидкости и... при переполнении (используяellipsis).

Требования:

.container имеет фиксированную известную ширину200px.badge может быть любой ширины, но максимальная30px, Это потому, что этот div содержит число (от 0 до 999). Это должно остатьсяright (плавать справа)..content а также.badge должен быть в одной строке.content будет иметь многоточие и Nowrap. Должен остатьсяleftКлюч важно:.contentширина =.containerширина -.badgeширина

Я не мог получить#5 выше, чтобы случиться. Любой указатель?

Мой код ниже либо сделал.badge обернуть во второй строке или.content просто не расширяет свою ширину.

HTML:

<div class=container>
    <div class=content>
        Donec id elit non mi porta gravida at eget metus
    </div>
    <div class=badge>
        5
    </div>
</div>

CSS:

.container {
    width: 200px;
    background: gray;
}

.content {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 170px;
    background: green;
}

.badge {
    display: inline-block;
    max-width: 30px;
    background: yellow;
    float: right;
}

Ссылка: http://jsfiddle.net/qhoc/4w6wR/1/