title: How to align divs right and left while using the CSS ghost element technique for vertical centering?
body: <p>I wanted to vertically center two divs in the header of my site.  Here is the code:</p>
  
  <pre><code>        &lt;header&gt;
              &lt;div class="block"&gt;
                  &lt;div class="left"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Home page link&lt;/li&gt;
                          &lt;li&gt;Music page link&lt;/li&gt;
                          &lt;li&gt;Contact page link&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="right"&gt;
                      &lt;ul&gt;
                          &lt;li&gt; Facebook icon code&lt;/li&gt;
                          &lt;li&gt; Twitter icon code&lt;/li&gt;
                          &lt;li&gt; YouTube icon code&lt;/li&gt;
                          &lt;li&gt; PayPal donate button code&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.block {
      width: 100%;
      height: 90px;
  }
  
  /* ghost element */
  .block:before {
      content: '';
      display: inline-block;
      height = 100%;
      vertical-align: middle;
      margin-right: -0.25em;
  }
  
  .right, .left {
      display: inline-block;
      vertical-align: middle;
  }
  
  .right {right: 0;}
  .left {left: 0;}
  
  .right li, .left li {
      display: inline-block;
  }
  
  .left li {
      font-size: 48px;
      margin-left: 12px;
      letter-spacing: -4.5px;
      text-transform: uppercase;
  }
  </code></pre>
  
  <p>This was taken from:<br />
  <a href="https://stackoverflow.com/a/15304578/1491212">https://stackoverflow.com/a/15304578/1491212</a><br />
  <a href="http://css-tricks.com/centering-in-the-unknown/" rel="nofollow noreferrer">http://css-tricks.com/centering-in-the-unknown/</a></p>
  
  <p>The code works insofar as it vertically centers the divs.  However, the examples discuss only one div to be vertically centered. I want two div's to be vertically centered with one aligned left and the other aligned right. Right now, they are sitting next to each other aligned right: </p>
  
  <p><img src="https://i.stack.imgur.com/fSRpX.png" alt="enter image description here"></p>
  
  <p>I'm new to coding and I've done as much reading as I could before coming here; however, I was unable to fix this (probably) simple problem.  So, do I get the div class=right and div class=left to the right and left within the strange ghost element framework?</p>