title: How to make the float left and float right on the same line?
body: <p><strong>The Problem</strong>: </p>
  
  <pre>
       **The left part** (#nav ul li) which float: left
       and **the right part** (#nav .search) which float: right
              **are not in a line**.
  </pre>
  
  <p><strong>it should be like this:</strong>
  <img src="https://i.stack.imgur.com/kdYQk.jpg" alt="enter image description here"></p>
  
  <p><strong>but mine:</strong>
  <img src="https://i.stack.imgur.com/tqR3m.jpg" alt="enter image description here"></p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;div id="nav"&gt;
     &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;div class="search"&gt;
       &lt;input type="text" name="search" id="search" value="search"&gt;
     &lt;/div&gt;       
  </code></pre>
  
  <p></p>
  
  <p><strong>The CSS:</strong></p>
  
  <pre><code>#nav ul li{
  float: left;
  list-style: none;
  margin: 0 20px;
  }
  
  #nav .search{
  float: right;
  }
  </code></pre>
  
  <p><hr>
  <strong>My Solutions:</strong></p>
  
  <p><strong>Solution 1</strong>: Use <strong>bootsrap</strong> to build layout instead of doing it on my own, i use it on the footer, and it's perfectly on the same line! Yet I still don't know how it works
  <img src="https://i.stack.imgur.com/YaV0T.jpg" alt="enter image description here"></p>
  
  <p><strong>Solution 2</strong>: I use <strong>margin-top: -20px</strong> to pull the search box up, but I don't think it is a good practice.</p>
  
  <p>Any one can help? Many thanks!</p>
  
  <hr>