title: How can I get all of the text and the Search Bar on the same line?
body: <p>---I tried all of the suggestions on fixing the code, but either the search bar comes before the "More" tab, or just doesn't change the final output. Any further ideas?</p>
  
  <p>Ok I'm trying to re-create the BBC website. In the process when I tried to add the search bar it seemed to wrap my top bar under itself, and I'm not sure how to fix the issue. I'll post the code (about 120 lines, not much) and a link to the reference site and hopefully somebody out there knows how to deal with this.</p>
  
  <p><a href="http://www.bbc.com/news/technology" rel="nofollow noreferrer">http://www.bbc.com/news/technology</a> ---- all I'm trying to do at the top bar that will take you to other portions of the website (i.e. the top tabs labelled "News, Sports, Weather,...etc." But like i said the code makes my search bar wrap down.<a href="https://i.stack.imgur.com/n9iKP.png" rel="nofollow noreferrer">My code.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#topbar {
    width: 800px;
    margin: 0 auto;
    height: 40px;
  }
  body {
    margin: 0 auto;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
  }
  #logo {
    margin-top: 8px;
    float: left;
    margin-right: 8px;
  }
  .topbar-section {
    float: left;
    border-left: 1px #CCCCCC solid;
    height: 100%;
  }
  #signin-text {
    font-weight: bold;
    font-size: 90%;
    position: relative;
    top: 11px;
    padding-right: 65px;
  }
  #signin-image {
    width: 25px;
    margin: 9px 15px;
    float: left;
  }
  .topbar-menu {
    font-weight: bold;
    font-size: 80%;
    padding: 10px 14px 0px 14px;
    height: 27px;
  }
  #more-arrow {
    width: 6px;
    margin-left: 65px;
  }
  #search-box {
    background-color: #E4E4E4;
    border: none;
    font-weight: bold;
    font-size: 14px;
    padding: 5px;
    margin: 7px 0px 7px;
    float: left;
  }
  #search-icon {
    height: 26px;
    margin-top: 7px;
    background-color: #E4E4E4;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="topbar"&gt;
    &lt;img id="logo" src="images/bbc-blocks-dark.png"&gt;
    &lt;div id="signin-div" class="topbar-section"&gt;
      &lt;img id="signin-image" src="images/signinimage.png"&gt;
      &lt;span id="signin-text"&gt;Sign in&lt;/span&gt; 
    &lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;News&lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;Sport&lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;Weather&lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;Shop&lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;Earth&lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;Travel&lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;
      More
      &lt;img id="more-arrow" src="images/more-arrow.png"&gt;
    &lt;/div&gt;
    &lt;div class="topbar-section topbar-menu"&gt;
      &lt;input id="search-box" type="text" value="Search"&gt;
      &lt;input type="image" id="search-icon" src="images/search-icon.png"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/n9iKP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n9iKP.png" alt="enter image description here"></a></p>