html的div的top,html – css div alignment,top：50％不起作用

soooo我似乎无法得到一些div对齐工作.基本上,我有一个容器div,我想在div中有一个左列和一个右列,基本上右列总是垂直大于左列.所以我希望左列垂直居中于右列旁边.这是我的css：

.recipe_container{

float:center;

width:800px;

position:relative;

padding:0px;

border:5px solid #B22222;

margin:0px auto;

}

.recipe_container_left{

float:left;

width:390px;

position:relative;

top:50%;

padding:4px;

border-right:1px solid;

margin:0px auto;

}

.recipe_container_right{

float:right;

width:390px;

position:relative;

padding:4px;

border-right:1px solid;

margin:0px auto;

}

并且html像这样依旧

recipe title and ingredients

recipe cooking instructions

但左侧的“recipe_container_left”div不在父级“recipe_container”div内垂直居中.我一直在谷歌搜索,似乎无法得到任何工作.我知道,新手问题.任何帮助？

像这样我想要的结果(动态扩展到浏览器窗口)：

------------------------------------------------------------

recipe_container ============================

| |

| recipe_container_right |

=========================== | recipe cooking- |

| recipe_container_left | | -instructions |

| recipe title+ingredients| | |

| | | |

=========================== | |

| |

| |

============================

------------------------------------------------------------

(repeat)