Floating Header Navigation Issue

Question

Итак, я пытаюсь получить макет навигации для заголовка, подобный показанному на этом изображении http://reversl.net/demo/, но у меня возникают трудности с перемещением как навигационных ссылок, так и строки поиска, обе из которых являются элементами списка внутри то же самое <ul> Вот где я в настоящее время в http://reversl.net/banner/ Мой HTML выглядит следующим образом

<div id="header"> 
<div id="wrap"> 
<div class="logo"> 
<h1>Logo</h1> 
</div><!--.logo--> 
<ul id="nav-primary"> 
<li> <input type="text" name="search" value="Search" /> </li> 
    <li><a href="#">Log In</a></li> 
    <li><a href="#">Sign up</a></li> 
    <li class="about"><a href="#">About</a>  
</li> 
</ul><!--#nav-primary--> 
</div><!--#wrap--> 
</div><!--#header--> 

Мой текущий стайлинг

#header { 
width: 100%; 
margin: 0 auto; 
background: #666; 
-webkit-box-shadow: 0 6px 6px -6px #999; 
-moz-box-shadow: 0 6px 6px -6px #999; 
box-shadow: 0 6px 6px -6px #999; 
} 

.logo { 
float: left;  
} 

#nav-primary { 
clear: both; 
margin: 0; 
padding: 0; 
} 

#nav-primary li { 
margin: 0; 
padding: 0; 
display: inline; 
list-style: none; 
} 

#nav-primary a { 
float: right; 
line-height: 1; 
padding: 0 10px 0 10px; 
text-decoration: none; 
color: #999; 
border-left: 1px solid #888; 
} 

#wrap { 
width: 90%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -40px; /* Set footer height. */ 
} 

Как вы можете видеть, что я не был в состоянии сделать это;

1) Float «и» панели поиска и навигации справа 2) имеют ссылки «границы слева» заполнить высоту панели навигации (возможно, отображая блок правильно?

Любые советы?

Answer 1

Смотрите скрипку для кода и демо для вывода

Fiddle:. http://jsfiddle.net/qn2mC/6

Демо: http://jsfiddle.net/qn2mC/6/embedded/result/