Невозможно вертикально выровнять боковые дочерние divs внутри родителя

Question

У меня есть три дочерних divs, сидящих бок о бок внутри родителя. Левая и правая имеют фиксированную ширину, а средняя - переменная ширина и требуется изменить размер с помощью браузера. Поскольку они имеют разную высоту, мне нужно вертикально выровнять их внутри родителя, но я не могу их получить, и они придерживаются вершины. Есть ли способ сделать это? Высота дочерних divs фиксирована, но высота родительского элемента должна быть переменной.

CSS:

#divMain { width: 100%; min-width:320px; height:400px} 
#div1 { width: 100px; height: 200px; float: left; red;vertical-align:middle;display:inline-block; } 
#div2 { margin-left: 110px; height: 400px; margin-right: 110px; vertical-align:middle;} 
#div3 { width: 100px; height:300px; float: right; vertical-align:middle;display:inline-block;} 

HTML

<div id="divMain"> 
    <div id="div1"></div> 
    <div id="div3"></div> 
    <div id="div2"></div> 
</div> 

Answer 1

Вот JS-свободный путь достижения этого с помощью position: absolute на боковых дивы:

Fiddle: http://jsfiddle.net/Xa8TW/2/

CSS

#divMain { 
    width: 100%; 
    min-width:320px; 
    position: relative; 
} 
#div1 { 
    width: 100px; 
    height: 200px; 
    background-color: red; 
    position: absolute; 
    top: 50%; 
    margin-top: -100px; 
} 
#div2 { 
    height: 600px; 
    margin: 0 110px; 
    background-color: green; 
} 
#div3 { 
    width: 100px; 
    height:300px; 
    background-color: blue; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -150px; 
} 

HTML может останутся без изменений, но теперь также можно поменять местами #div2 и #div3, так как нет плавающих элементов, требующих определенного порядка.

Answer 2

фиксируется ли высота DIVs? Как видно из вашего кода, высоты фиксируются на 400 пикселей. Если это так, то решение очень простое - просто предоставьте margin-top до div1 и div3.

Я создал скрипку для этого и удалил некоторые бесполезные фрагменты CSS (которые также не делают различий). Посмотрите

http://jsfiddle.net/8kv2K/