3 DIVs next to each other with medium void filling

Question

Hello, I would like to ask you how to put 3 DIVs next to each other, while the middle one fills the void between the first and third DIVs.

I would like to have dynamic buttons in the first third DIV, and I need a middle DIV to fill the gap between the DIV one and the third.

I would take pure CSS / HTML (without JavaScript)

Here is my attempt:

http://jsfiddle.net/4smx3627/

#wrapper{
height: 30px;
}

#first{
    height: 100%;
    background-color:red;
    float: left;
    display: inline-block;
}

#second{
    height: 100%;
    background-color:green;
    display: inline-block;
}

#third{
    height: 100%;
    background-color:yellow;
    float: right;
    display: inline-block;
}

Thanks so much for any advice.

Answer 1

. , , - "Flexbox", . , .

jsfiddle http://jsfiddle.net/sxx65mhq/

HTML

<div class="container">
    <div>first</div>
    <div class="middle">second</div>
    <div>third</div>
</div>

CSS

.container {
    display: flex;
}

.middle {
    flex-grow: 1;
}

. http://caniuse.com/#feat=flexbox

Answer 2

. HTML. div.

JS Bin Here

body{
  margin:0 auto;
}
div{
 margin:0 auto;
  border:0px solid;
 height:200px;
  display:block;
}
#one {
  width:20%;
  float:left;
}

#two {
  width:60%;


}

#three {
  width:20%;
  float:right;
}

: , div.