Question

The Problem:

     **The left part** (#nav ul li) which float: left
     and **the right part** (#nav .search) which float: right
            **are not in a line**.

it should be like this:

but mine:

The HTML:

<div id="nav">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
   <div class="search">
     <input type="text" name="search" id="search" value="search">
   </div>       

The CSS:

#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}

#nav .search{
float: right;
}

---

My Solutions:

Solution 1: Use bootsrap 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

Solution 2: I use margin-top: -20px to pull the search box up, but I don’t think it is a good practice.

Any one can help? Many thanks!

---

Answer 1

The reason it doesn’t work as expected is that the <ul> on the left is expanding out to the right, thus pushing the content down. The solution might be to set an explicit fixed width for the left and right areas which is what I have done when I have faced this scenario in the past. But will say that a mix of floats and even absolute positioning is what will ultimately work.