arouse arouse - 3 months ago 4x
HTML Question

How to make the float left and float right on the same line?

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:
enter image description here

but mine:
enter image description here


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

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
enter image description here

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!


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 & 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 & even absolute positioning is what will ultimately work.