CSS header not lining up. Trying to display the logo using top -20px rest of menu not lining up

Question

I'm trying to make a header bar that contains an image followed by a title and the a menu car. The bar is displayed after 50px and I want the image to be moved up slightly so that its over the top of the wrapping div and showing a bit in the 50px above. Using position absolute on the wrapping div and position relative with the image then moving it up by 20px works fine but when I do this the rest of the elements in the div stay below it. Is there a way to move those other elements up to they are inline with the image?

I've made a simple jsfiddle of what I'm trying to do here: http://jsfiddle.net/67sTt/

HTML:

<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
  <h2>Header</h2>
</div>
<nav class='menu'>
  <ul>
      <li>first</li>
      <li>second</li>
  </ul>
</nav>
</div>

CSS:

.headerContainer {
  top: 50px;
  background-color: green;
  position: absolute;
  width: 100%;
}

.logoContainer {
  height: 120px;
  width: 120px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: -20px;
}

.title {
  font-style: italic;
  display: inline-block;
  position: relative;
  padding: 0;
}

.menu {
  display: inline-block;
  position: relative;
}

I need the title and the menu to line up in the middle of the image(the red box).

Using position: absolute moves them to the top which is fine but the title and the menu layer on the top of each other.

I know I could use this and give the menu some padding to the left so that it sits next to the title but when the page size is reduces the menu moves below the image and title so I don't want the padding shown then, and I'd rather not come up with some hacky jquery way of managing that if it can be done in css only.

Answer 1

like this? http://jsfiddle.net/67sTt/1/

add:

vertical-align: top

to menu and title