CSSヘッダーが並んでいません。ロゴを表示しようとするトップ20px残りのメニューが並んでいない

Question

画像を含むヘッダバーとそれに続くタイトルとメニューカーを作成しようとしています。 バーは50pxの後に表示され、画像が包まれたDIVの上部にあるように画像を少し上昇させ、上記の50pxのビットを表示します。 画像との相対的な位置を絶対に使用してから、画像との相対位置を20pxで移動すると元気になりますが、これを行うとDIVの残りの要素がそれを下回るとします。それらの他の要素を画像とインラインで移動する方法はありますか？

私はここでやろうとしていることの簡単なJSfiddleを作った： 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;
}

.

イメージの途中に並ぶようにタイトルとメニューが必要です（赤いボックス）。

位置の使用：絶対は、互いの上のタイトルとメニューレイヤーの上部とメニュー層に移動します。

私はこれを使ってメニューを左にパディングさせることができたことを知っていますが、タイトルの横にあるように、ページサイズが画像のサイズを減らしたときに画像とタイトルが表示されているので、パディングが表示されたくないそれから、そしてそれがCSSのみで行うことができるならば、いくらかのハッキーなjQueryの方法を考えていない。

Answer 1

これが好きですか？> http://jsfiddle.net/67stt/1/

追加：

vertical-align: top

.

メニューとタイトル