Left/Center/Right DIVs with Vertical Alignment - css

Question

Trying to set up a outer DIV that is 114px high and 100% wide (page width). Inside that I want three DIVs left, center and right. The height of these inner 3 divs vary. I'd like all three inner DIVs to be centered top to bottom (vertically aligned).
I have gotten close floating left and right or left:0 and right:0 but stuck on the vertically centered part. Left and right DIVs contain images center text only. Having a hard time getting images to show on jsfiddle so I can't provide much of an example, sorry.
I have found examples with top and bottom alignment but no luck centered.
Thanks!
EDIT:
TyBlitz, you pointed me in the right direction. Thanks! However, on your container div height - inner div height you then need to divide by 2. For your example:
114-50=64 then divide by 2 = 32 for top.
Also needed to play around with text-align (left/center/right) Not thrilled making all inner DIVs 33% but it works. Seems like I should be able to have them scalable width and still position them correctly.
Here is my fiddle with example images imbedded: My Fiddle

Answer 1

Like so?
Simply float the 3 divs, give each of them a height, position them relatively (important!) and give them a top: container.height - innerdiv.height; E.g. container.height of 114 & innerdiv.height of 50 => 114-50 = 64=> top: 64px;
EDIT: Well if you don't want to make your divs all 33% , with some simple math you can approximately position your divs with the float and margin properties.
Like in this fiddle of yours I updated.
The math behind it is:
Container.length - combined innerdiv.length = unoccupied.length
margin-left: unoccupied.length / x (eg 50px / 5 = margin of 20% = 10px)

Answer 2

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.

Answer 3

I've created this example to show how to vertically align the container and use column count (css3) which will automatically layout the 3 divs into 3 equal columns.
-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;
and for non supporting browsers (IE) you can just set the width to 33% and float left.
http://codepen.io/tom-maton/pen/oqsEJ
Hope this helps