title: CSS Vertical align does not work with float
body: <p>How can I use the <code>vertical-align</code> as well as <code>float</code> in the <code>div</code> properties? The <code>vertical-align</code> works fine if I do not use the <code>float</code>. But if I use the float, then it does not work. It is important for me to use the <code>float:right</code> for the last div.</p>
  
  <p>I am trying following, if you remove the float from all div's then it would work fine:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="left"&gt;First div, float left,  has more text.&lt;/div&gt;
      &lt;div class="left2"&gt;Second div, float left &lt;/div&gt;
      &lt;div class="right"&gt;Third div, float right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      width: 500px;
      overflow:hidden;    
      background: pink;
  }
  
  .left {
      width: 150px;       
      margin-right: 10px;
      background: yellow;  
      float:left;
      vertical-align: middle;  
      display:inline-block
  
  }
  
  .left2 {
      width: 150px;    
      margin-right: 10px;
      background: aqua;
      float:left;
      vertical-align: middle;   
      display:inline-block
  }
  
  .right{
      width: 150px;
      background: orange;
      float:right;
      vertical-align: middle;
      display:inline-block
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/J5Ujj/1/" rel="noreferrer">JSFiddle</a></p>