Is there a way to prevent an input box from displaying on a lower line than the menu when using CSS to create a one line menu floated to the right?
This is the CSS code being used:
<style type="text/css">
#nav {
margin:0;
padding:0;
list-style:none;
}
#nav li {
float:left;
display:block;
background-color: #6F7D94;
position:relative;
z-index:500;
margin:0 1px;
}
#nav li a {
display:block;
padding:5px 10px 5px 10px;
font-weight:200;
text-decoration:none;
text-align:center;
color:#fff;
}
.menu-container {
float:right;
}
</style>
The menu structure is as follows:
<div class="menu-container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Browse</a></li>
<li><a href="#">Tags</a></li>
</ul>
<input name="q" id="id_q" />
<input type="submit" value="Search">
</div>