javascript - Mixing in jQuery's UI widget with my topNav kills horizontal alignment -

in web application using jquery , jquery ui (1.10.2 , 1.10.4 respectively), use css in jquery css in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of zip file jquery site. had topnav bar before got jquery-based autocomplete function work:

myprofile         link1          link2      |   search box           |     logout 

my search box 300px , fonts 12px, , width of div container above 700px , before added jquery autocomplete support, this:

<div class="topnav">     <div class="left">           <a href...>myprofile</a>>&nbsp&nbsp           <a href...>link1</a>>&nbsp&nbsp           <a href...>link2</a>>&nbsp&nbsp     </div>     <input id="searchbox" name="searchbox" type="search" >     <div class="right">           <a href...>logout</a>     </div> </div> 

it aligned (all of topnav in 1 line).

now, after adding jquery support so:

<div class="topnav">     <div class="left">           <a href...>myprofile</a>>&nbsp&nbsp           <a href...>link1</a>>&nbsp&nbsp           <a href...>link2</a>>&nbsp&nbsp     </div>       <!-- div-ing input searchbox change: -->      <div class="ui-widget">            <input id="searchbox" name="searchbox" type="search" >      </div>       <div class="right">           <a href...>logout</a>     </div> </div> 

and now, search box has decided appear in next line, , logout appears in second line, so:

myprofile         link1          link2        |   search box           |                                                  logout 

any on how horizontally align after jquery autocomplete support appreciated.

i followed approach in accepted answer in so post. seems have solved problem. css properties of .ui-widget (the jquery div element) can additionally changed (for font size etc.) in application, way can remove issues including dependency.