Выровнять div в верхней части контейнера

Question

Вы можете видеть в этом JSFiddle, что div search выровнен по центру, как я могу привести его в соответствие с вершиной?

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

У вас есть по крайней мере два варианта. Если вы хотите поместить поиск div вправо, переместите его в код html. Теперь поисковый div плавает прямо к элементам, которые после его в коде. (Обратите внимание, что вы имели незаконченный DIV в исходном коде.)

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> 

Другой вариант, чтобы сделать предыдущие элементы (a и h2) всплывает на левую сторону поиска div, но что не выглядит так хорошо, как поиск div не находится на правом краю окна браузера.