0 down vote favorite


I'm a brand new css programmer. I am trying to create a text search box that fits inside my Navigation bar on the top of every page on my site.

My nav bar has 5 tabs that align to the left of the page. then immediately after the FAQ tab a few pixel space then the text box should fit right in the purple nav bar. The text box, SUBMIT button and ADVANCED link. how to I get this top happen.

When I resize the Firefox 23.01 browser window, the text box moves out of the navigation bar, and drops under the nav bar into the yellow body content area. .

I know this may be a real obvious rookie move but I am very new. Any help would be great. I've been working on this for hours.!

here is the css code.


<style>

html {background: yellow;
width: 100%;}


nav { background: blue;
height: 2.3em;
width: 100%;
}

ul, li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.040em;}


ul {
background: purple;
height: 2em;
width: 100%;}

li a {
display: block;
line-height: 2em;
padding: 0 1.2em;
color: white;
text-decoration: none; }

li a:hover {
background:blue;
height: 2em;
padding-top: .3em;
position: relative;
text-decoration: underline;
top: -.3em;
border-radius: .3em .3em 0 0 }

.current, a:hover.current{
background: blue;
color: #eee;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
border-bottom: .3em solid blue;
cursor: default;}


.button {
background: blue;
color: white;
padding: 0 1em;
height: 2.4em;
display: table;
border: 1px solid rgb(32, 124, 202);
font-family: Helvetica, Times New Roman;
font-weight: 100;
font-size: .85em;
letter-spacing: .045em;
line-height: 2.4em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border-radius: .325em;
-webkit-box-shadow: inset 0px 1px 3px rgb(162,200,229);
box-shadow: inset 0px 1px 3px rgb(162,200,229);
background: rgb(30,87,153); } </style>

here is the HTMl

<nav >

<ul class="nav">
<li> <A href="../index.cfm" title= "Home" Class="current">Home</A></li>
<li> <A href="../ar.cfm" title = "Sell Here">Sell it</A></li>
<li> <A href="../aboutus.cfm" title = "About Us">About Us</A></li>
<li> <A href="../rlist.cfm" title = "A List">A List</A></li>
<li> <A href="../faq.cfm" title = "FAQ">FAQ</A></li>

<form>

<li><div id="searchbox">

<input type="text" value="search word here.." style="font-size: 14pt" name="searchbox" size ="36em" onfocus="setValue(this)"

onblur="setValue(this)"/>

<li> <div id="button">
<input type="submit" value="Find!">

<li><div id="signin">
<A href="search.cfm">Advanced</a></li>

</form></div></li>