Остановка div падающая на следующую строку

Question

Я хочу добавить поле поиска в свой навигатор, установив все мои ссылки влево и получив форму поиска, расположенную вправо, с помощью гибкой коробки между ними:

<div class="nav"> 
    <a... 
    <a... 
    <div class="flex"></div> 
    <div class="search"> 
     <form> 
      <input type="text" style="border:none;" placeholder="Search"> 
      <input type="image" src="/images/search.png"> 
     </form> 
    </div> 
</div> 

Соответствующий CSS в настоящее время я использую:

.nav{margin:0 auto;padding:10px 0;max-width:1280px;min-width:800px;width:84%;background:#000 url('../images/navBG.png') repeat-x;} 
.nav a{padding:10px;} 
.flex{-moz-box-flex:1.0;-webkit-box-flex:1.0;-ms-flex:1.0;box-flex:1.0;} 
.search{display:inline-block;overflow:hidden;} 

Однако, это не работает, как ожидалось. Без поиска и гибких div (т. Е. Только ссылок на navbar) все в порядке, но добавление div поиска отправляет div на следующую строку. Попытка вернуть его в ту же строку с помощью текстового переноса: ничто не делает ничего.

Answer 1

Я не знаю, если это лучший способ, но я бы использовал таблицу.

<table border=0 cellpadding=0 cellspacing=0 width=100%><tr> 
<td width=84% ><div class="nav"> 
       <a... 
       <a... 
       </div></td> 
<td><div class="flex"> 
    </div></td> 
<td><div class="search"> 
    </div></td> 
</tr></table>