title: vertical align two divs within a relative div but float one to the right
body: <p>I have been trying to use display: inline-block; more often. I have two divs or images or whatever at inline-block level. I am vertically aligning them at middle. However, I would like to have one float left, and one float right - which breaks the spell. For example: a logo in a header on the left and a mobile navigation symbol on the right. I might as well just say that absolute positioning is not an option:</p>
  
  <p><a href="http://jsfiddle.net/nouveau_io/GLtxn/" rel="nofollow">A FIDDLE is here:</a>   Thanks.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header class="global-header"&gt;
      &lt;div class="logo"&gt;logo&lt;/div&gt;    
      &lt;div class="hamburger"&gt;☰&lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
  
  html, body {
      margin: 0;
  }
  .global-header {
      position: relative;
      width: 100%;
      float: left;
      padding: 1em;
      background-color: rgba(0,0,0,.2);
  }
  
  .logo, .hamburger {
      display: inline-block;
      vertical-align: middle;
      background-color: #f06;
      padding: 1em;
  }
  
  .logo {
      width: 12em; height: 5em;
  }
  
  .hamburger {
      width: 3em; height: 3em;
  }
  </code></pre>