Fluid width with text-overflow ellipsis

Question

I'm trying to make inner div with fluid width and ... when overflow (using ellipsis).

Requirements:

1. .container has fixed known width 200px
2. .badge could be any width but max is 30px. This is because this div contains a number (from 0 to 999). This must stay right (float right).
3. .content and .badge must be in same line
4. .content will have ellipsis and nowrap. Must stay left
5. Key important: .content's width = .container's width - .badge's width

I could not get #5 above to happen. Any pointer?

My code below either made the .badge to wrap in second line or the .content just doesn't expand its width.

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;
}

Link: http://jsfiddle.net/qhoc/4w6wR/1/

Answer 1

Try this:

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

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

.content {    
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
    background: green;
}

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