検索バーを含むナビゲーションバーの作成

私は自分のウェブサイトのナビゲーションバーで作業しており、検索ボックスを追加したいと思います。私はテキストフィールドを使用しています。私はCSSで配置していますので、解像度に応じて完全に揃えられます。どのようにして1つの位置に留まるのか確認できますか？参考までに、アップルのウェブサイトのようなものだが、それ以外はもっと大きい。ここで検索バーを含むナビゲーションバーの作成

は私のHTMLコードのナビゲーションバーの一部です：

div#adholder 
{ 
    width:728px; 
    height:90px; 
    align:center; 
} 

ul#navlinks 
{ 
    postition: absolute; 
    right: 280px; 
    margin:20px; 
    padding:0; 
    list-style:none; 
    width:525px; 
} 

#searchBox 
{ 
    position: fixed; 
    left: 890px; 
    top: 250px; 
    height: 30px; 
} 
/*#searchBox 
{ 
    position:absolute; 
    right:150; 
    top:150; 
    width: 300px; 
    height: 35px; 
}*/ 

#submitButton 
{ 
    display: none; 
} 
ul#navlinks li 
{ 
    display: inline; 
} 

ul#navlinks li a 
{ 
    text-decoration: none; 
    padding: 5px 0; 
    width:100px; 
    background: none; 
    color:#000; 
    float:left; 
}

：

<img id="navbar" src="images/Navbar.png" alt="Navigation"/> 
<form method="get" action="" class="search"> 
    <input class="msb" maxlength="2048" id="searchBox" size="40" title="Search" value="" lang="en" /> 
    <input value="Search" id="submitButton" type="submit" /> 
</form> 
<ul id="navlinks"> 
    <li id="navHome"><a href="index.php">Home</a></li> 
    <li id="navSubmit"><a href="submit.html">Submit</a></li> 
    <li id="navArchive"><a href="archive.html">Archive</a></li> 
    <li id="navApps"><a href="apps.html">Apps</a></li> 
    <li id="navContact"><a href="contact.html">Contact</a></li> 
</ul>

、ここでは私のCSSです（navlinksが並んでいないのどちらかそう#navlinkセクションが本当に関連性がないことに注意

（何らかの理由でコードフォーマッタが動作していない...）

これは、それが私を1366x768のノートパソコンの画面上でどのように見えるかです： This is how it looks on my 1366x768 laptop screen.