Fill remaining space between two inline-blocks with another inline-block

Question

I have 3 divs. Each of them is an inline-block. The left one floats left. The right one floats right. The middle one floats right too. The outer divs have fixed widths. What I want to do is, that the middle div fills the whole space between the other divs. I can't specify a width, because it should work with every width of the screen. Here's the code.

<div id="wrapper">
    <div id="right"></div>
    <div id="middle"></div>
    <div id="left"></div>
</div>

#wrapper {
    width: 100%;
}
#left {
    float: left;
    width: 50px;
}
#right {
    float: right;
    width: 50px;
}
#middle {
    float: right;
}

Answer 1

You just need to remove float:right; on #middle and put it after #left and #right in HTML markup.

See this FIDDLE

HTML :

<div id="wrapper">
    <div id="right"></div>
    <div id="left"></div>
    <div id="middle"></div>
</div>

CSS

#wrapper {
    width: 100%;
}
#left {
    float: left;
    width: 50px;
}
#right {
    float: right;
    width: 50px;
}