So I’m trying to get a navigation layout for a header like the one

Question

0

Asked: May 31, 20262026-05-31T23:45:46+00:00 2026-05-31T23:45:46+00:00

So I’m trying to get a navigation layout for a header like the one

0

So I’m trying to get a navigation layout for a header like the one shown in this image http://reversl.net/demo/ but I’m having difficulty floating both the navigaton links and search bar, both of which are list items within the same <ul> Here’s where I’m currently at http://reversl.net/banner/ My html looks like this

<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-->

My current styling is

#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. */
}

As you can see, what I’ve not been able to do is;

1) Float ‘both’ search bar and nav to the right
2) Have the links ‘border-left’ fill the height of the nav bar (possibly by displaying block right?

Any advice?