Нет обтекания для поля ввода при плавающей справа

Question

У меня есть список, отображаемый в виде однострочного меню с использованием CSS.Меню всплывает вправо и заканчивается окном ввода.Проблема в том, что поле ввода отображается в нижней строке, чем меню.Как я могу избежать этого?

Мой CSS выглядит следующим образом:

<style type="text/css">
 #nav {
   margin:0; 
   padding:0; 
   list-style:none;
 }  

 #nav li {
   float:left; 
   display:block; 
   background-color: #6F7D94;
   position:relative;
   z-index:500; 
   margin:0 1px;
 }

 #nav li a {
   display:block; 
   padding:5px 10px 5px 10px; 
   font-weight:200;  
   text-decoration:none; 
   text-align:center; 
   color:#fff;
 }

 .menu-container {
   float:right;
 }
</style>

Мое меню выглядит так:

<div class="menu-container">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">Tags</a></li>
  </ul>
  <input name="q" id="id_q" /> 
  <input type="submit" value="Search">
</div>

Answer 1

Вот скрипка.

http://jsfiddle.net/Be4xW/

Answer 2

Добавить ширину к меню-контейнеру {float: right;ширина: 700 пикселей;}

Answer 3

Просто добавив white-space: nowrap; к вашему .menu-container, добьетесь цели. http://jsfiddle.net/vvR7B/

Answer 4

Сделать входную часть списка - добавить в другую пару LI.