CSS: Having 3 div on the same line with the middle one taking the remaining space

Question

I'm building a toolbar, I'd like the yellow part in the following example to take the whole space left (in white):

http://jsfiddle.net/MWjGH/1/

<div class="left"> Some content </div>
<span class="middle"> This should fill the space left </span>
<div class="right"> Some other content </div>

with css:

.left {
    float: left;
    background-color: #ddd;
    display: inline-block;
}
.middle {
    background-color: yellow;
    display: inline-block;
}
.right {
    float: right;
    background-color: #ddd;
    display: inline-block;
}

Edit: the content of left and right is dynamic, it can change, so I don't want to set width on them

Answer 1

I don't know if that suits you because of a slight HTML change:

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<span class="middle"> This should fill the space </span>

But I believe it is what you want,

CSS:

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
    display: block;
    overflow:hidden;
}
.right {
    float: right;
    background-color: #ddd;
}

DEMO :http://jsfiddle.net/pavloschris/MWjGH/12/

Answer 2

Put the middle div after the floated divs:

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<div class="middle"> This should fill the space left </div>

Then, don't change any of the display properties so they stay on block (the default for div)

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
}
.right {
    float: right;
    background-color: #ddd;
}

Fiddle: http://jsfiddle.net/hLmj7/