How to get my search-bar aligned right on all screens.(and operating systems)

How to get my search-bar aligned right on all screens.(and operating systems)

her is my code so far when i open my website on my laptop running Ubuntu(12.04.1)
my search-bar is aligned perfect when i open my website on my work-desktop running windows 7
my searchbar is not aligned perfect.

HTML 4.01(passed the w3c standards test(im also adding the code for the navigation bar since my search bar is inside the navigation-bar div))

<ul id="nav">
<li><a href="index.html"><img src="images/home.gif" title="Home" alt="Home"><b><font color="red">Home</font></b></a></li>
<li><a href="linux.html"><img src="images/linux_logo.gif" title="Linux" alt="Linux" height="18" width="18">Linux</a></li>
<li><a href="learn.html"><img src="images/brain.gif" title="Brain" alt="Brain" height="18" width="18">Learn</a></li>
<li><a href="../tutorials/top-games-for-ubuntu.html"><img src="images/game.png" width="18" height="18" title="Games" alt="Games">Games</a></li>
<li><a href="about.html"><img src="images/corneillie-black-red.jpg" title="about" alt="about" height="18" width="18">About</a></li>

<li id="eurobytes-search" title="Eurobytes search">
<form action="/sphider-1.3.5/search.php" method="get" class="search" style="width: 100%;height: 100%;"> 
<input name="query" id="query" size="20" onblur="if(this.value == '') { this.value = 'search' }" onfocus="if(this.value == 'search') { this.value = '' }" value="search" class="search" type="text">
<input name="search" value="1" type="hidden">
<a href="/sphider-1.3.5/search.php?adv=1" title="Advanced Search" style=" 
    background-color:#F5F5F5;  
    border-right: 0px; 
    display: inline;
    font-weight: normal;
    padding: 0px 0px;
    text-decoration: none;
    font-size: 16px;
    vertical-align:baseline;
    text-transform: uppercase;">Advanced Search</a>
<input style="display:inline; width: 30%; height: 23px;    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    font-size: 100%;
    vertical-align:baseline;
    color:#000000;" value="search" type="submit" >
</form>
</li>
</ul>

CSS3(searchbar and navigationbar )

#nav {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    float: left;
    height: 100%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#nav li {
    float: left;
}

#nav li a {
    border-right: 1px solid #CCCCCC;
    color: #006699;
    display: block;
    font-weight: bold;
    padding: 14px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

#nav li a:hover {
    background-color: #FFFFFF;
    color: #CC0000;
}

#eurobytes-search {
    color: #CDCDCD;
    float: right;
    height: 100%;
    padding: 0;
    text-align: right;
    width: 244px;
}

#query {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    font-size: 16px;
    height: 23px;
    width: 99%;
}

to simplify my question, how to give my input command the same width on all screens and operating systems?

Use a pixel dimension on your input, not a percentage, and use float:right. You need to clear your float after this element.

Also, you need to modernize they way you're using list-based menus. You should be using a CSS background image on the A-tag, not an inline image. Font tags are definite no-no. Use CSS for all your styling in an external stylesheet. Inline styles are bad-form.

See my tutotial: I Love Lists