3 DIVs next to each other with middle filling the void

Question

Hello I would like to ask you how to put 3 DIV next to each other while middle one is filling the void between first and third DIV.

I would like to to have dynamic buttons in first nad third DIV and I need the middle DIV to fill the space between DIV one and three.

I would brefer pure CSS / HTML (no JavaScript)

Here is my try:

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

Thank you very much for any advice.

Answer 1

There are many ways to achieve this. A modern way which most accurately reflects your description is "Flexbox", however you may need to be careful of browser support. If you're only interested in the latest browser versions, it's a good option. Here's an example

jsfiddle http://jsfiddle.net/sxx65mhq/

HTML

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

And CSS

.container {
    display: flex;
}

.middle {
    flex-grow: 1;
}

For browser support, see http://caniuse.com/#feat=flexbox

Answer 2

You'll need to float left and right. But pay attention to the order in the HTML. Floats are first then the middle 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;
}

Edit: changed borders to background colors for easier viewing of divs.