css - vertically align for floated element -

fiddle

i've 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 following css:

#all{     height: 300px;     background: red; } #one{     float: left; } #two{     float: right; } #main{     margin: 0 auto;     width: 250px; } 

i wanted align vertically no success after using pseudo technique. vertical alignment should work @ least ie8.

please note: can't change markup. means can't avoid using float.

so, there way make success?

well, using css floats gives no chance align floated element vertically in container (regardless of using css flexible box method).

hence i'd go inline-blocks can align them vertical-align: middle declaration.

so far good, #two element must positioned @ right side of container without using css floats. hence have specify width of columns to reorder columns via relative positioning:

to approach work on ie8, have use percentage units width columns. saying we'll end with:

example here

#all {     height: 300px;     width: 100%;      font-size: 0; /* remove 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 font-size default value */ }  #one, #two { width: 30%; } #two { left: 40%; text-align: right; } /* push column right 40% */ #main{ right: 30%; width: 40%; }       /* pull column left  30% */ 

this work on ie8+ (not remember requirements of ie6/7). ie9+ can use calc() expression specify width of columns 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; }