Search Box within Navigation bar alignment issue - html

Question

Hey i'm just learning programming and im trying to have my search bar always centered with the nav links to the right of it with-in the fixed navigation bar. I just can't seem to make it work. Here is my html and css. I appreciate the help!
<div id ="nav">
<div id ="navigation">
<container id= "search">
<form class="form-wrapper cf">
<form action ='./search.php' method='get'>
<input type="text" placeholder="" required>
<button type="submit"><img class= "icon" src="images/search-icon.png"></button>
</form>
</container>
<div>
Home
About
Contact
Login
</div>
</div>
</div>
And my CSS:
#nav {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 28px;
padding: 12px 0px 0px 0px;background: #4c4c4c; /* Old browsers */
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #1c1c1c 90%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(90%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#nav a {
font-size: 12px;
padding-right: 60px;
color: white;
text-decoration: none;
}
#nav a:hover {
color: grey;
}
#navigation {
display: inline;
text-align: center;
}
#search {
position: absolute;
top: 5px;
}

Answer 1

I would move the search form into the middle of the navigation menu. Check out this fiddle: http://jsfiddle.net/DJa25/8/
<div id ="nav">
<div id ="navigation">
<div>
Home
About
<container id= "search">
<form class="form-wrapper cf">
<form action ='./search.php' method='get'>
<input type="text" placeholder="" required>
<button type="submit"><img class= "icon" src="images/search-icon.png"></button>
</form>
</container>
Contact
Login
</div>
</div>
#search {
display: inline-block;
}

Answer 2

Firstly I have never heard of a container tag, unless I'm missing something.
Secondly you cannot wrap a form onto a form. So take out the wrapping form. Plus the form tag with the action and method attribute does not have a closing tag so include it.
<div id="navigation">
<form class="nav-form">
<input type="text" required>
<button type="submit">Submit</button>
</form>
<nav>
<ul>
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
</nav>
</div>
then include this css
#navigation {
top:0;
position:fixed;
display:block;
width:100%;
height:28px;
}
.nav-form{
margin:0 auto;
float:left;
}
nav {
float:left;
}
nav ul li {
float:left;
list-style-type:none;
text-decoration:none;
}
Hope this helped.
There may be an issue with margin:0 auto in which it won't center. If this happens do this:
margin-left;auto;
margin-right:auto;
or if that doesn't work:
margin-left:50%;
You can add your backgrounds and stuff after and can change the css around for your needs. I just done it the way it should work