title: input and button side by side
body: <p>Im working on a header for a website and i have a problem with search option.<br>
  I have include an <code>input</code> and a <code>button</code> tag. <br>
  Thoose have to have a <code>vertical-align: middle;</code> and should be side by side.</p>
  
  <p>I've try something but it doesn't work.
  Can somebody explain why and how i fix that?</p>
  
  <p>HTML: </p>
  
  <pre><code>    &lt;div id="main_search"&gt;
          &lt;input id="main_search_input" type="text" placeholder="Suchen" /&gt;
          &lt;button id="search_button"&gt;&lt;img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /&gt;&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main_search {
      float: right;
      line-height: 60px;
      margin: 0 50px 0 0;
  }
  #main_search_input {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      height: 20px;
      line-height: 20px;
      width: 200px;
      vertical-align: middle;
      padding: 5px 10px 5px 10px !important;
  }
  #search_button {
      background-color: #FFF;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      height: 30px;
      padding: 5px;
      vertical-align: middle;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/yuWc2/" rel="nofollow"><strong>FIDDLE</strong></a></p>