help needed! placing 2 elements side by side

Hi, i am modifying a them and need to place the search box on the right side of the logo (please check http://vpromote.net) right now the search box in on top of the logo. Since i am new at css, please help me figure this out.

Header.php

<div id=”sitename”>
<div id=”searchbox”>
<form method=”get” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
<input name=”s” type=”text” class=”sb” value=”Search” size=”10″ tabindex=”1″ />
<input name=”search” type=”submit” value=”search” />
</form>
</div>
“>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/logo-small.gif” />
</div>
<div id=”navs”>
<div id=”navigator”>

• “>Home

<?php wp_list_pages(‘title_li=&depth=1’); ?>

</div>

Style.css

#sitename {
margin: 0px;
padding: 0px;
float: left;
width: 415px;
}
#navs {
margin: 0px;
padding: 0px;
float: left;
width: 915px;
height: 45px;
}
#searchbox {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
#searchbox form {
margin: 0px;
padding: 0px 0px 0px 0px;
float: left;
width: 70%;
}
#searchbox .sb {
font-family: Arial, Tahoma, “Lucida Sans”;
font-size: 12px;
color: #333333;
background: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 1px 4px;
width: 200px;
border: 1px solid #CCCCCC;
}
#navigator {
margin: 0px;
padding: 19px 2% 0px;
float: left;
width: 100%;
height: 28px;
background: url(images/navs.jpg) no-repeat bottom;
}
#navigator ul {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
list-style-type: none;
}
#navigator ul li {
margin: 0px;
padding: 0px 19px;
float: left;
list-style-type: none;
display: inline;
font-size: 12px;
color: #FFFFFF;
line-height: 28px;
height: 28px;
border-right: 1px dotted #35617B;
}
#navigator li a {
color: #9edfd4;
text-decoration: none;
}
#navigator li a:hover {
color: #268D9F;
text-decoration: underline;
}