Горизонтальное отображение логотипа и навигационного меню в заголовке

Question

по какой-то причине я не могу заставить мое меню логотипа и навигатора горизонтально выравниваться в заголовке. Я все еще выясняю свойства плавания и отображения, и я предполагаю, что это проблема. Я попытался поставить дисплей: встроенный блок на обоих, и это, казалось, работало, пока я не установил ширину: 100% на моем navContainer. Так как же я буду делать это?

Вот jsfiddle моей проблемы. Заранее спасибо.

EDIT: Я хотел сказать, что я пытаюсь сделать navContainer справа от моего логотипа. Float: Слева на моем логотипе работает, но выделяется над заголовком пробел.

CSS

#header { 
    width: 100%; 
    height: 100px; 
    background-color: #DDDDDD; 
} 

#innerHeader { 
    margin: 0 auto; 
    width: 75%; 
    height: 100px; 
} 

#logo { 
    width: 100px; 
    height: 100px; 
} 

#navList { 
    margin-left: 50px; 
    width: 100%; 
    height: 100px; 
    background-color: red; 
} 

#navList li { 
display: inline; 
list-style-type: none; 
padding-right: 20px; 
} 

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="innerHeader"> 
      <div id="logo"> 
       <img src="http://i.imgur.com/ZZvupYE.png" title="Bad Gizmod" /> 
      </div> 
      <div id="navList"> 
       <ul> 
        <li><a href="#">Item two</a> 

        </li> 
        <li><a href="#">Item three</a> 

        </li> 
        <li><a href="#">Item four</a> 

        </li> 
        <li><a href="#">Item five</a> 

        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <!-- {block:Posts} {/block:Posts} --> 

Answer 1

EDIT:

Я думаю, что ОП хотел его справа от его логотипа.

http://jsfiddle.net/N9rk5/6/

Вот CSS для этого

#header { 
    width: 100%; 
    height: 100px; 
    background-color: #DDDDDD; 

} 

#innerHeader { 
    display: block; 
    margin: 0 auto; 
    width: 100%; 
    height: 100px; 
} 

#logo { 
    float: left; 
    width: 20%; 
    margin: 0 auto; 
    height: 100px; 
    display: inline-block; 
} 

#navList { 
    display: inline-block; 
    width: 70%; 
    margin-left: 0px; 
    float: right; 
    text-align: center; 
    height: 100px; 
    background-color: red; 
} 

#navList li { 

    display: inline; 
    float: left; 
    list-style-type: none; 
    padding: 0 5px; 
} 

Answer 2

Try Добавление:

#logo { 
    float: left; 
} 

Не забудьте очистить поплавки, хотя!