title: Push text following image to top of div
body: <p>I have a div black bar, and a logo image that currently sits at the left as the first child element of this div. The logo image has a height larger than the black bar's fixed height of 42, so it juts out (this is a style choice) </p>
  
  <p>I want to include a menu in the black bar, so I added a UL menu as the next child element.
  However, it sits as the bottom of the div, outside the black bar area, because it sits inline with the logo. </p>
  
  <p>I want to push the menu to the top, above the black area</p>
  
  <p><img src="https://i.stack.imgur.com/dahCF.jpg" alt="Div bar containing image and ul menu"></p>
  
  <p>I've tried every possible combination of floats, display: inline/inline-block, margin-top, padding-top, etc. but to no avail. </p>
  
  <p>Anyone got a solution?</p>
  
  <p>Thanks!!!</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="black-bar"&gt;
      &lt;a href="..." class="logo"&gt;&lt;img src="..."&gt;&lt;/img&gt;&lt;/a&gt;
  
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="programs.shtml"&gt;Programs &amp; Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="recipes.shtml"&gt;Recipes&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (This is only the lat of many combos I've tried)</p>
  
  <pre><code> #black-bar {
      text-align: left;
      background: #373737;
      height: 43px;
      padding-left: 60px;
      width: 100%;
      line-height: 119px; 
  }
  
  #black-bar .logo {
      float: left;
      margin-left: 0px;
      }
  
  
  /* header menu */
  
  #black-bar ul{
      line-height: 119px;
      display: inline;
      vertical-align: top;
  }
  
  
  #black-bar ul li{
      display: inline;
  
  }
  </code></pre>