title: How can I vertically align two floated divs?
body: <p>I have two divs inside a container div. One need to float left the other float right. They also both need to be vertically centered inside their parent. How can I achieve this?</p>
  
  <pre><code>&lt;div id='parent'&gt;
      &lt;div id='left-box' class='child'&gt;Some text&lt;/div&gt;
      &lt;div id='right-box' class='child'&gt;Details&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>If no float is applied to either they vertically align to the middle with this css</p>
  
  <pre><code>.child{ display:inline-block; vertical-align:middle; }
  </code></pre>
  
  <p>However adding <code>#right-box{ float: right; }</code> causes the children to lose their vertical alignment. What am I doing wrong?</p>
  
  <p>Thanks guys</p>