I think this can solve your problem, although you'll have to create 3 wrapper divs.
HTML
<div class="outer">
<div class="leftDiv">
<div class="leftInnerDiv">Left Div</div>
</div>
<div class="rightDiv">
<div class="rightInnerDiv">Right Div</div>
</div>
<div class="centerDiv">
<div class="centerInnerDiv">Center Div</div>
</div>
</div>
CSS
.outer,
.leftDiv,
.rightDiv,
.centerDiv{
height: 114px;
}
.leftDiv{
float: left;
}
.rightDiv{
float: right;
}
.centerDiv{
overflow: hidden;
}
.leftDiv:before,
.rightDiv:before,
.centerDiv:before{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.leftInnerDiv,
.rightInnerDiv,
.centerInnerDiv{
vertical-align: middle;
display: inline-block;
}
.leftInnerDiv{
background-color: red;
}
.rightInnerDiv{
background-color: green;
}
.centerInnerDiv{
background-color: blue;
}
jsfiddle link: http://jsfiddle.net/pv6yJ/1/
Please note though:
- The right div is declared before the middle div in the html.
- My solution (css vertical align) doesn't work on IE7 or lower.