title: Aligning a Navigation Menu with a logo
body: <p>I might having some understanding problems with basic CSS but, even by looking on other threads I just cannot get rid of that problem.
  I've realized that vertical-align just works on inline elements, which is fine. But some problems come out when I actually try to vertically align a menu to the left of its logo.
  I still think this issue is caused by floating elements and position property, which are a huge understanding problem for me but I hope someone can just help me to deal with this, because it's starting to be a bit annoying.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
    &lt;div id="logo"&gt;
      &lt;img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
    &lt;/div&gt;
    &lt;div id="nav-container"&gt;
      &lt;ul id="navbar"&gt;
        &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;
     &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    margin: 0;
    padding; 0;
  }
  #container {
    margin: auto;
    width: 960px;
  }
  #nav-container {
    margin: 0;
    width: 750px;
    float: right;
    border:1px black dashed;
    height: 200px;
  }
  ul#navbar {
    margin: 20px;
    padding: 0;
    list-style: none;
  }
  ul#navbar &gt; li {
    display: inline;
    vertical-align: bottom;
  }
  ul#navbar &gt; li &gt; a {
    padding: 5px;
    display: block;
    text-decoration: none;
    font-size: 25px;
    text-align: center;
    float: left;
    border-right: 1px black solid;
  }
  ul#navbar &gt; li &gt; a:hover {
    background-color: RoyalBlue;
  }
  ul#navbar &gt; li &gt; a &gt; p{
    vertical-align: bottom;
  }
  </code></pre>
  
  <p>My pen:
  <a href="http://codepen.io/Rej/pen/egKYEa" rel="nofollow noreferrer">http://codepen.io/Rej/pen/egKYEa</a></p>