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

Question

The Problem:

     **The left part** (#nav ul li) which float: left
     and **the right part** (#nav .search) which float: right
            **are n         


        

Answer 1

An alternative to the solutions already mentioned is to flip the order of the markup around, so that the right-floating item comes first.

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

   

     
   
       
   

     
Home
     
Portfolio
     
Blog
     
Contact
   

You don't have to do anything else. No other CSS or markup is needed.