Aligning search box

In my navigation bar I have following:

<div id="topnavigation">
<a class="topmenu" href="http://site" title="">home</a>
| 1 | 2 | 3 | <a href="" title="">4</a> | 4 <!-- Sphider Simple HTML Search Code -->
<form abinetype="unknown" abineprocessed="true" aburl="searchtool/search.php" abhost="site" abaction="searchtool/search.php" id="ABID_14735034" abhfe="1" action="searchtool/search.php" method="get">
<input abinetype="" abinelabel="query" abineprocessed="true" name="query" id="query" size="20" value="" type="text"></div>

The css with this:

#topnavigation {
	  height: 20px;
  margin:0 -1px;/* no width needed*/
 border-top:1px solid #e0d6a4;
 border-bottom:1px solid #e0d6a4;

A.topmenu:link {color:#404040;font-weight:bold;font-family:arial,tahoma,sans-serif;font-size:11px;text-decoration:none;}
A.topmenu:visited {color:#404040;font-weight:bold;font-family:arial,tahoma,sans-serif;font-size:11px;text-decoration:none;}
A.topmenu:active {color:#333333;font-weight:bold;font-family:arial,tahoma,sans-serif;font-size:11px;text-decoration:none;}
A.topmenu:hover {color:#333333;font-weight:bold;font-family:arial,tahoma,sans-serif;font-size:11px;text-decoration:none;}

My problem is that the search box is positioned under the nav 1, 2, 3 etc instead of aligned at the right of same line. Adding a style to the div (align:right;) not worked as well.

1 | 2 | 3 | etc

seach box here

want to have it like:

1 | 2 | 3 | etc | searchbox here

Someone who can help me out with this?


The only two issues i see with your CSS is your using a capital A for the selector reference which is bad practice as when you use <a> older browsers may not read that CSS because the tag is a different case to the actual selector, the other issue is your anchor selector is VERY redundant because your repeating properties in which you can group together, to start off with lets group common properties together in a specific selector then the color property into specific pseudo selectors.

a.topmenu {
    color: #404040;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;

a.topmenu:hover {
    color: #333;

You can already see how much cleaner the CSS is just by grouping the properties into specific selectors, to align the search box with the nav you would need to specify a specific width for both elements and float them left of each other like the below example:

#ABID_14735034 {
    float: left;
    width: 50%;

Now of course this is a redundant way of selecting the form because the id may change at some point so a better way to do it would be to call the parent element and target the form directly:

#parent-name-here form {
    float: left;
    width: 50%;

Once we have done that we need to clear the floats as by default floats will break the flow of the parent element causing all other elements to “spill” outside the boundary which we don’t want, to fix this on the parent element all we simply need to do is add overflow: hidden which will contain the floats:

#parent-name-here {
    overflow: hidden;

If all has gone well you should now have 2 nicely aligned elements that you can assign custom widths to you personal choice.