浮动标题导航问题

所以我试图得到像这个图像http://reversl.net/demo/显示的标题的导航布局，但我很难浮动navigaton链接和搜索栏，它们都是列表项同样<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）浮动“既有”搜索栏和导航向右 2）有联系“左边框”可能是通过显示块正确填写导航栏（高度？

有什么建议？

来源

2012-03-24 Jedda