El encabezado CSS no está alineando.Tratando de mostrar el logotipo usando el resto del menú TOP -20PX no alineado

Question

Estoy tratando de hacer una barra de encabezado que contiene una imagen seguido de un título y un automóvil de menú. La barra se muestra después de 50px y quiero que la imagen se mueva ligeramente para que esté sobre la parte superior del div que se envuelva y se muestre un poco en el 50px anterior. El uso de la posición absoluta en el div y la posición de envoltura relativa con la imagen y luego moverlo por 20px funciona bien, pero cuando hago esto, el resto de los elementos en la estancia DIV debajo de ella. ¿Hay alguna manera de mover esos otros elementos hasta que están en línea con la imagen?

He hecho un simple JSFiddle de lo que estoy tratando de hacer aquí: http://jsfiddle.net/ 67sttt /

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;
}

Necesito el título y el menú para alinearse en el centro de la imagen (la caja roja).

Uso de la posición: Absolute los mueve a la parte superior, que está bien, pero el título y la capa de menú en la parte superior de la otra.

Sé que podría usar esto y darle al menú algún acolchado a la izquierda para que se asiente junto al título, pero cuando el tamaño de la página se reduce, el menú se mueve debajo de la imagen y el título, por lo que no quiero que se muestre el relleno. Luego, y prefiero no encontrar algo de una forma de jquery hacky de administrar que si se puede hacer solo en CSS.

Answer 1

¿Te gusta esto? http://jsfiddle.net/67sttt/1/

Añadir:

vertical-align: top

al menú y título