title: Aligning logo image with navigation bar
body: <p>I would like to align logo image with navigation bar so that logo is on left and navigation bar at the center. You can see here what I have tried: <a href="http://jsfiddle.net/4fTwh/" rel="nofollow">http://jsfiddle.net/4fTwh/</a> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="navigation"&gt;
          &lt;p&gt; &lt;img class="logo-img" src="http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png" alt="Logo"&gt;
              &lt;ul id="nav-list"&gt;
                  &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;News&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/p&gt;        
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navigation{
      width: 100%;
      text-align: center;
      background-color: #CEE3F6; 
  }
  
  #nav-list{
     list-style-type: none;
  }
  
  #nav-list li{
     display: inline;
     font-size: 18px;
     margin: 20px;
  }
  .logo-img{
      float: left;
      margin: 0px 15px 15px 0px;
  }
  </code></pre>
  
  <p>Now, I would like for navigation bar text to be bottom aligned with logo image. And also that colored background to be height of the image (not lower around navigation bar text, as it is now). So basically, how to wrap together logo(on left) and navigation bar(centered) so that background is height of higher of these two elements?</p>