为什么我的div不会垂直对齐？

Question

所以，我不会把包装器添加到彼此的顶部，但我希望包装器日记div在两者之间。我不完全确定为什么包装日记不会在两个div旁边对齐，因为它们都在同一个包装器中。边缘表示它们应该能够按照我希望的方式对齐，但它们不会出于某种原因。

HTML：

<div id="wrapper">
<div id="wrapper-add">  
  <div id="addFood3">
    <!--stuff-->
  </div>
</div>
  <div id="wrapper-add">
    <div id="addFood2">
    <!--stuff-->
    </div>
  </div>
 <div id="wrapper-diary">
      <!--stuff-->
 </div>
   </div>

CSS：

#addFood3{
  margin-top:75px; 
  margin-bottom:75px; 
  margin-right:auto; 
  margin-left:13%; 
  border-width:2px; 
  border-style:solid;
  border-color:#ABABAB; 
  padding:10px 10px; 
  float:left;
  background:#FFFFFF; 
  width:235px; 
  border-radius:3px;
}

#addFood2{
  margin-top:40px; 
  margin-bottom:40px; 
  margin-right:auto; 
  margin-left:13%; 
  border-width:2px; 
  border-style:solid;
  border-color:#ABABAB; 
  padding:10px 10px; 
  float:left;
  background:#FFFFFF; 
  width:235px; 
  border-radius:3px;
}

#wrapper{
  width:100%;
  height:100%;
  position:absolute;
  overflow:auto;
}

#wrapper-add{
  width:25%;
  height:260px;
  overflow:hidden;
}

#wrapper-diary{
  width:74%;
  margin-top:0px;
  margin-left:25%;
  position:absolute;
  overflow:hidden;
  padding:0%;
  z-index:-3;
}