title: css div alignment, top:50% doesn't work
body: <p>soooo i can't seem to get some div alignments to work. basically, i have a container div, and i want a left column and a right column inside the div, and basically the right column is always going to be vertically greater than the left column. so i want the left column to vertically center next to the right column. here is my css:</p>
  
  <pre><code>.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;
   }
  </code></pre>
  
  <p>and the html is nestled like so </p>
  
  <pre><code>&lt;div class="recipe_container"&gt;
      &lt;div class="recipe_container_left"&gt;
           recipe title and ingredients
      &lt;/div&gt;
      &lt;div class="recipe_container_right"&gt;
           recipe cooking instructions
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>but the left "recipe_container_left" div doesn't vertically center inside the parent "recipe_container" div. I've been googling for a little while and can't seem to get anything to work. i know, newbie problem. any help?</p>
  
  <p>like this is what i want as a result (that dynamically scales to the browser window some):</p>
  
  <pre><code>------------------------------------------------------------
  recipe_container             ============================
                               |                          |
                               |  recipe_container_right  |
   =========================== |  recipe cooking-         | 
   | recipe_container_left   | |  -instructions           |                   
   | recipe title+ingredients| |                          |
   |                         | |                          |
   =========================== |                          |
                               |                          |
                               |                          | 
                               ============================
  ------------------------------------------------------------
  (repeat)
  </code></pre>