title: How do I vertically align two divs?
body: <p>I realize there are many questions like this about this issue, but I could not find any that would suit my needs.  My template's header will have a "banner" which will contain two floated divs: the branding which would be the site name and slogan; and then an advertisement.  I would like my advertisement to be vertically aligned with the branding.  I have tried the table display method but nothing is working.  Here is a <a href="http://jsfiddle.net/oxoc8m9r/" rel="nofollow">jsFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="banner"&gt;
      &lt;div class="container"&gt;
          &lt;div id="branding"&gt;
              &lt;h1&gt;Site Name&lt;/h1&gt;
              &lt;p&gt;Your catchy slogan goes here.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="advert"&gt;
              &lt;div class="advert"&gt;
                  &lt;h1&gt;Your advertisement could be here!&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#banner {
      background: #C1CE96;
      padding: 0;
      margin: 0;
      width: 100%;
      display: table;
      height: 10%;
      position: relative;
  }
  
  #banner #branding {
      padding: 10px;
      float: left;
      display: table-cell;
      vertical-align: middle;
  }
  #banner #branding h1 {
      font-size: 1.5em;
      color: #484A47;
  }
  #banner #branding p {
      font-size: 1em;
  }
  
  #banner #advert {
      float: right;
      vertical-align: middle;
      display: table-cell;
  }
  
  .advert {
      width: 468px;
      height: 60px;
      background: #fff;
      border: 1px solid #484A47;
      text-align: center;
  }
  .advert h1 {
      font-size: 1em;
  }
  </code></pre>