Positioning search form in wordpress navigation menu - html

Question

Hi guys I am trying to position a search box in my navigation menu of my wordpress site. I have managed to get it displaying in the menu using a plugin called Search Box Navigation. This plugin enables me to style the box to suit my needs.
However this is where I am running into issues.
The code responsible for generating the box located in a plugin file: (I added a class to the li in an effort to control how it would appear on the site...
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li class="menusearch">' . $searchform . '</li>';
return $items;
}
?>
This is my navigation html:
<nav id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul id="prime_nav" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><span>Item 1</span></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><span>Item 2</span>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><span>Item 3</span></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><span>Item 4</span></li>
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><span>Test</span></li>
<li class="menusearch">
<form method="get" id="searchform" action="http://incomebrokers.tld//">
<input type="text" value="Search"/>
<input type="submit" id="searchsubmit" value="Search" />
</form>
</li>
</ul>
</div>
</nav>
This is my css
#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}
/*Menu Search Class*/
.menusearch{
margin-left:500px;
}
any help on how I can position this box to the far right of the navigation but have it adjust when the browser is smaller in size?

Answer 1

I noticed that the same width(100px) is set for each li of the nav.
What about if you edit the css and you add:
#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}
#access ul li:last-child {
float:right;
width:300px;
}
http://jsfiddle.net/mBBJM/4537/
You could make it fluid and setting the width in % with a different percentage for the li of the nav that might need it.