How can I make the center div take up the remaining space between the left and right divs, without covering them? The contents in the center can overflow hidden if necessary.
HTML
<div id=container>
<div id=left>
<div>first element</div>
<div>second element</div>
<div>third element</div>
</div>
<div id=right>right frame variable width</div>
<div id=center>
<div>first element</div>
<div>second element</div>
<div>third element</div>
</div>
</div>
CSS
html,body{margin:0;}
*{box-sizing:border-box;}
#container {
height:30px;
white-space:nowrap;
background-color:lightgreen;
}
#left {
float:left;
border:4px solid black;
height:100%;
}
#left *{
border:2px solid blue;
display:inline-block;
height:100%;
}
#center {
float:left;
border:4px solid black;
display:inline-block;
overflow:hidden;
height:100%;
}
#center *{
border:2px solid red;
display:inline-block;
height:100%;
}
#right {
float:right;
border:4px solid black;
height:100%;
}