i've been scratching my head but just can't work out why the submit button on a form i've built is not aligning where i expect. I want the button to sit nice and neatly alongside the text field. At the moment it positions itself on a new line below the #searchbar div. Any ideas would be gratefully received!

here's the html:

<form action="#" method="get" id="destSearch" name="destSearch">
<div id="searchbar">
<div id="searchinput">

<input type="text" name="ds" value="click and type destination" id="ds" align="middle" autocomplete="off" onfocus="clearMe(this)" onblur="returnMe(this)" />
<div id="autoCompleteMenu" name="autoCompleteMenu" class="auto_complete"></div>
</div><!-- end of searchinput -->
<input type="submit" id="submit" value="search" />
</div>
</form> <!-- End of searchbar -->

and here's the relevant css:

#searchbar {
width: 100%;
height: 60px;
background: #7c001d url(backgrounds/searchbar_grad.png) 0 0 repeat-x;
}

#searchinput {
width: 722px;
height: 60px;
margin-left: 34px;
background: #e6ecab url(backgrounds/searchbar_input_pt1.png) 0 0 no-repeat;
}

#ds {
margin: 0px 0px 0px 402px;
height: 60px;
width: 370px;
background: #e6ecab url(backgrounds/searchbar_input_pt2.png) 0 0 no-repeat;
border: none;
padding-top: 8px;

}

div.auto_complete {
width: 370px;
background: #a80329 url(backgrounds/auto_complete.gif) 0 0 repeat-x;
font-size: 2em;
color: #000000;
opacity: 0.88;
z-index: 100;
border: 3px solid #37000d;
}
div.auto_complete ul {
/*border: 1px solid #5d5d5d;*/
margin:0;
padding:0;
width:370px;
list-style-type:none;
}

div.auto_complete ul li {
margin:0;
padding:3px;
}

div.auto_complete ul li.selected {
background: #e6ecab url(backgrounds/auto_complete_select_bkgd.png) 0 0 no-repeat;
height: auto;
color: #000000;
border: 2px solid #5d5d5d;
text-shadow: #5d5d5d 1px 1px 1px;

}

div.auto_complete ul strong.highlight {
color: #7c001d;
margin:0;
padding:0;
}


#submit {
width:60px;
height: 40px;
}