Header CSS не подкладка.Попытка отобразить логотип, используя TOP -20PX Остальное меню не подкладка вверх

Question

Я пытаюсь сделать панель заголовка, которая содержит изображение, сопровождающее заголовок и автомобиль меню. Бар отображается после 50 пикселей, и я хочу, чтобы изображение было немного перемещено, так что его над верхней частью упаковки DIV и отображая немного в 50PX выше. Используя положение Absolute на упаковке DIV и позиции относительно изображения, затем перемещение его на 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.

Answer 1

Вот так? http://jsfiddle.net/67stt/1/

Добавить:

vertical-align: top

.

к меню и названию