title: Cannot correctly position an input element with CSS
body: <p>I have a form that is being filled with dynamically generated dropdowns. </p>
  
  <p>I have set the display property to 'table' on advice in order to keep the container centered even as the elements are added. </p>
  
  <p>The problem I have is that I'm using an input type=image instead of a button to submit the form and this image will not stay in the container when the dynamic dropdowns area added. As soon as the a single dropdown is added the width increase in the div containing the form pushed the 'button' down onto the next line, while I want to keep it inline. </p>
  
  <p>ps I have tried adding display: inline but this isnt working. </p>
  
  <pre><code>&lt;div id="searchBar"&gt;
  &lt;div id="searchwrapper"&gt;    
              &lt;form name="search_input"&gt;
          I am looking for a      
      &lt;div id="sBar1" style="display:inline;"&gt;
      &lt;select id="search_level" class="selectSearchBar" name="search_level"&gt;  
      &lt;?php
          echo "&lt;option&gt;Level&lt;/option&gt;";
          while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
                  echo "&lt;option value=".$row['id']."&gt;".$row['level']."&lt;/option&gt;";
                  }
              ?&gt;              
                  &lt;/select&gt;
                      &lt;/div&gt;
      &lt;div id="sBar2" class="selectSearchBar"&gt;&lt;/div&gt;
      &lt;div id="sBar3" class="selectSearchBar"&gt;&lt;/div&gt;
      tutor in &lt;input type=text class="searchbox" id="location"  value="Location"/&gt; 
      &lt;input type=image src="images/search_icon.png "  class="searchbox_submit" name="searchbox_submit"  onclick="searchLocations()" value=""&gt;&lt;/form&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the corresponding CSS:</p>
  
  <pre><code>#searchBar{
  width:940;
  margin: 0px auto;
  }
  
  
  #searchwrapper{
  display: table;
  margin: 0 auto;
  min-width:600px;
  padding-top: 10px;
  background: red;
  }
  
  
  #searchwrapper form {
  
  }
  
  .searchbox {
  border:0px; /*important*/
  background-color:transparent; /*important*/ 
  position:absolute; /*important*/
  width:200px;
  height:40px;
  border-radius:9px;
  font-size: inherit;
  }
  
  .searchbox_submit {
  border:0px; /*important*/
  background-color:transparent; /*important*/
  position:absolute; /*important*/
  }
  .selectSearchBar{
      height:40px;
      width:137px;
      display:inline;
      background-image: url('../images/up_down_arrows.png');
      background-position: right center;
      background-repeat:no-repeat;
      margin:3px 1px 0px 0px;
      border-radius:9px;
  }
  </code></pre>
  
  <p>This image is what I want i.e. the icon at the end of the row
  <img src="https://i.stack.imgur.com/Gu154.png" alt="This image shows the icon in the correct position (it&#39;s too far up but it appears at the end of the div as I need it)"></p>
  
  <p>this is the problem after each select is added dynamically:
  <img src="https://i.stack.imgur.com/N0LHF.png" alt="This is what happens after I add a new select"></p>