Align div to top of container - css-float

Question

You can see in this JSFiddle that the search div is centre aligned, how can I make it align to the top?
HTML:
<div id="wrapper">
<div id="banner">
<a href="#"><h1>Title</h2><br />
<h2>Subtitle</h2></a>
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
</div>
CSS:
#wrapper{
width:85%;
margin:35px auto;
}
#banner{
height:150px;
padding:30px;
padding-bottom:5px;
}
#search{
float:right;
display:inline;
width:38%;
}
#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}

Answer 1

You have at least two options. If you want to float the search div to right, move it up in the html code. Now the search div floats right to the elements that are after it in the code. (Note that you had an unclosed div in the original code.)
See the Fiddle
<div id="wrapper">
<div id="banner">
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
<a class="" href="#"><h1>Title</h2><br />
<h2 class="">Subtitle</h2></a>
</div>
</div>
Other option is to make the preceding elements (a and h2) float to the left side of the search div but that doesn't look so good as the search div is not at the right edge of the browser window.