title: CSS vertically align floating divs
body: <p>I have a div (#wrapper) containing 2 divs standing side by side. </p>
  
  <p>I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy! </p>
  
  <p>Hope someone can help. </p>
  
  <p><a href="http://cssdesk.com/LWFhW" rel="noreferrer">http://cssdesk.com/LWFhW</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="left-div"&gt;
      &lt;ul&gt;
        &lt;li&gt;One&lt;/li&gt;
        &lt;li&gt;Two&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;  
    &lt;div id="right-div"&gt;
      Here some text...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper{
    width:400px;
    float:left;
    height:auto;
    border:1px solid purple;}
  
  #left-div{
    width:40px;
    border:1px solid blue;
    float:left;}
  
  #right-div{
    width:350px;
    border:1px solid red;
    float:left;}
  
  ul{
    list-style-type: none;
    padding:0;
    margin:0;}
  </code></pre>