vertically align for floated element - css

Question

fiddle
I've the following markup:
<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here</div>
</div>
and the following css:
#all{
height: 300px;
background: red;
}
#one{
float: left;
}
#two{
float: right;
}
#main{
margin: 0 auto;
width: 250px;
}
I wanted to align vertically but no success even after using pseudo technique. Vertical alignment should work at least ie8.
Please note: I can't change the markup. It means I can't avoid using float.
So, is there any way to make it success?

Answer 1

Well, using CSS floats gives no chance to align the floated element vertically in their container (regardless of using CSS flexible box method).
Hence I'd go with inline-blocks so that I can align them by vertical-align: middle declaration.
So far so good, but the #two element must be positioned at the right side of the container without using CSS floats. Hence we have to specify width of the columns to reorder the columns via relative positioning:
To get this approach to work on IE8, we have to use percentage units for the width columns. Saying that we'll end up with:
EXAMPLE HERE
#all {
height: 300px;
width: 100%;
font-size: 0; /* To remove the white-space between inline-block columns */
}
#all:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#one, #two, #main {
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 16px; /* Reset the font-size to the default value */
}
#one, #two { width: 30%; }
#two { left: 40%; text-align: right; } /* Push the column to the right by 40% */
#main{ right: 30%; width: 40%; } /* Pull the column to the left by 30% */
This will work on IE8+ (not remember the requirements of IE6/7). However for IE9+ we can use calc() expression to specify the width of columns like so:
Example Here
#one, #two {
width: calc((100% - 250px) / 2);
}
#two{
left: 250px;
text-align: right;
}
#main{
right: calc((100% - 250px) / 2);
width: 250px;
background-color: orange;
}

Answer 2

Demo
Using flex-box
css
#all{
height: 300px;
background: red;
display: flex;
align-items:center
}
#one{
float: left;
order: 1;
}
#two{
float: right;
order: 3;
}
#main{
margin: 0 auto;
width: 250px;
order: 2;
}

Answer 3

Using a bit of jquery and css you can easily center the elements that you want:
CSS
div{
outline:solid gray 1px;
}
#all{
height: 300px;
}
#one{
float: left;
position:relative;
}
#two{
float: right;
position:relative;
}
#main{
margin: 0 auto;
width: 250px;
position:relative;
}
JS
function center(element){
var all = $("#all");
if(element.height()<all.height()){
element.css(
"top",
((all.height()/2)-(element.height()/2))+"px"
);
}
}
center($("#one"));
center($("#two"));
center($("#main"));
FIDDLE
http://jsfiddle.net/ovkgzmdv/5/