title: How to vertically middle-align floating elements of unknown heights?
body: <p>I have a (horizontally) centered outer div containing two elements of unknown width:</p>
  
  <pre><code>&lt;div style='width:800px; margin:0 auto'&gt;
    &lt;div style='float:left'&gt;...&lt;/div&gt;
    &lt;div style='float:right'&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both floats are top-aligned by default, and are of varying/unknown and different heights. Is there any way to make them vertically centered?</p>
  
  <p>I eventually made the outer div</p>
  
  <pre><code>display: table
  </code></pre>
  
  <p>and the inner divs </p>
  
  <pre><code>display: table-cell;
  vertical-align: middle;
  text-align: left/right;
  </code></pre>
  
  <p>but I'm just curious if there's a way to do this with the floats.</p>