How to make Search form in navigation bar fill the space between two div elements?

Question

I'm trying to make a navigation bar in which the search form will always fill the space between the left and right part/divs of the navigation bar, one example of such a search form would be Amazon.

I've tried multiple approaches for the last two hours yet the search bar doesn't seem to want to change width unless I set it manually.

The full code: http://jsfiddle.net/asoctyk9/

The HTML:

<nav>
    <ul>
        <div class="navbar-main-wrapper">
            <div class="navbar-left-wrapper">
                <li><a href="/" >Home</a></li>
                <li><a href="profile" >My Account</a></li>
                <li><a href="contact" >Contact</a></li>
            </div>
            <div class="navbar-right-wrapper">
                <li><a href="login" id="nav-sign-in">Sign In</a></li>
                <li><a href="register" id="nav-register">Register</a></li>
                <li><a href="logout" id="nav-logout" onclick="logoutConfirm()">Logout</a></li>
                <script>
                    //...
                </script>
                <li><a href="about">About</a></li>
            </div>
            <!-- MIDDLE FILL -->
            <div class="navbar-search-wrapper">
                <li>
                    <form action="/search" id="searchform" method="GET">
                        <input type="search" name="search" placeholder="What are you looking for..." /> 
                        <button type="submit" form="searchform"><i class="fa fa-search"></i></button>
                    </form>
                </li>
            </div>
        </div>
    </ul>
</nav> 

The CSS:

nav {
    margin-bottom: 30px;
}
nav ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    /*overflow: hidden;*/
    background-color: #232f3e;   
    height: 47px;
    padding-bottom: 5px;
}

nav li {
    display: inline-block;
    padding-right: 2px;
    padding-left: 2px;
}

nav .navbar-left-wrapper {

    padding-left: 10%;
    float: left;
}
nav .navbar-right-wrapper {
    float: right;
    padding-right: 10%;
}

nav .navbar-main-wrapper {
    margin: 0 auto;
    max-width: 1460px;
    min-width: 1100px;
}

nav li a {
    display: block;
    color: white;
    /*text-align: center;*/
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10%;
}

nav li a:hover:not(.active) {
    background-color: #485769; 
}

nav li a#nav-logout:hover:not(.active) {
    background-color: rgb(221, 34, 34);
}

nav a.active {
    background-color: #586a80;
}

nav input[type=search] {
    height: 40px;  
    font-size: 16px;
    background-color: none;
    padding: 10px 20px 10px 20px;

    display: inline-block; 

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border:none;
    resize:none;

    margin: 4px 0px 4px 0px;

    font: inherit;
    font-size: 14px;
    font-weight: normal;

    padding: 10px;

}

nav input[type=search]:focus {
    outline: none;
}
nav .navbar-search-wrapper {
    display: inline-block;
    /*border: 2px solid red;*/
}

nav .navbar-search-wrapper button {
    float: right;
    padding: 10px 10px;
    margin-top: 4px;

    background: #ffa807;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

nav .navbar-search-wrapper button:hover {
    background: #ff8808;
}

When I zoom out the page the search bar goes to the left. I'd like it to "stick" to the first element of navbar-right-wrapper and last of navbar-left-wrapper and expand while the user zooming out the page, basically always filling the space between links.

I'm just starting out with HTML and CSS so any help with this would be greatly appreciated!

Edit: added CSS code

Answer 1

Please add this css

#searchform {
height: 40px;
padding: 0px 15px;
display: inline-block;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
margin: 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
position: relative;
border-radius: 5px;
overflow: hidden;
}

#searchform input[type=search] {
height: 38px;
border: 0;
}

nav .navbar-search-wrapper button {
float: right;
margin: auto;
background: #ffa807;
font-size: 17px;
border: none;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
top: 0;
text-align: center;
padding: 10px;
}

and remove this:

nav input[type=search] {
height: 40px;
font-size: 16px;
background-color: none;
padding: 10px 20px 10px 20px;
display: inline-block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
margin: 4px 0px 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
padding: 10px;
}

Answer 2

There is some HTML and CSS changes. Please use below code.

HTML Code :

<nav>
    <div class="nav_my_main">


        <div class="navbar-main-wrapper">

            <ul class="navbar-left-wrapper">
                <li><a href="/" >Home</a></li>
                <li><a href="profile" >My Account</a></li>
                <li><a href="contact" >Contact</a></li>
            </ul>

            <ul class="navbar-right-wrapper">
                <li><a href="login" id="nav-sign-in">Sign In</a></li>
                <li><a href="register" id="nav-register">Register</a></li>
                <!--{{#if auth}}
                <script>
                    console.log(this)
                    var register = document.getElementById('nav-register');
                    register.style.visibility = 'hidden';
                    register.style.position = 'absolute';
                </script>
                {{/if}} -->
                <li><a href="logout" id="nav-logout" onclick="logoutConfirm()">Logout</a></li>
                <script>
                    function logoutConfirm() {
                        var r = confirm('Are you sure you want to log out?');
                        //if the user clicks "Cancel" on the pop-up, user doesn't logout
                        if (r !== true) {
                            event.preventDefault();
                        }
                    }
                </script>
                <li><a href="about">About</a></li>
            </ul>

            <!-- MIDDLE FILL -->
            <ul class="navbar-search-wrapper"> 
                <li>
                <form action="/search" id="searchform" method="GET">
                    <input type="search" name="search" placeholder="What are you looking for..." /> 
                    <button type="submit" form="searchform"><i class="fa fa-search"></i></button>
                </form>
                </li>
            </ul>
             </div>
        </div>
</nav> 

CSS Code

/* ==== START NAVIGATION BAR ==== */

nav {
    margin-bottom: 30px;
}
nav .nav_my_main{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    /*overflow: hidden;*/
    background-color: #232f3e;   
    height: 47px;
    padding-bottom: 5px;
}

nav li {
    display: inline-block;
    padding-right: 2px;
    padding-left: 2px;
}

nav .navbar-left-wrapper {
    padding-left: 0;
    float: left;
    width: 300px;
}
nav .navbar-right-wrapper {
    float: right;
    padding-right: 0;
    width: 275px;
}

nav .navbar-main-wrapper {
    margin: 0 auto;
    max-width: 1460px;
    min-width: 1100px;
    margin: 0px;
    padding: 0px;
    background-color: #232f3e;
    height: 47px;
    padding-bottom: 5px;
    display: block;
    width: 100%;
}

nav li a {
    display: block;
    color: white;
    /*text-align: center;*/
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10%;
}

nav li a:hover:not(.active) {
    background-color: #485769; 
}

nav li a#nav-logout:hover:not(.active) {
    background-color: rgb(221, 34, 34);
}

nav a.active {
    background-color: #586a80;
}

/* ==============SEARCH BAR============== */
nav .navbar-search-wrapper li{
  width:100%;
}
nav input[type=search] {
    height: 40px;  
    font-size: 16px;
    background-color: none;
    padding: 10px 20px 10px 20px;
    /*-webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;*/

    /*center element using parent text-align:center and child display:inline-block; */ 
    display: inline-block;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border:none;
    margin: 4px 0px 4px 0px;
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    width: calc(100% - 36px);

}

nav input[type=search]:focus {
    outline: none;
}
nav .navbar-search-wrapper {
    display: inline-block;
    width: calc(100% - 615px);
    padding-left: 0;
    margin: 2px auto;
    /*border: 2px solid red;*/
}

nav .navbar-search-wrapper button {
    float: right;
    padding: 10px 10px;
    margin-top: 4px;

    background: #ffa807;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    height: 40px;
    width: 36px;
  }

nav .navbar-search-wrapper button:hover {
    background: #ff8808;
  }

/* ==============END SEARCH BAR============== */  

/* ==== END NAVIGATION BAR ==== */

Answer 3

You may be looking something like this, perhaps?

Just wrap all inside a ul tag then just give ul display: flex, and put percentage unit for the li that's wrapping the search form.

ul {
  list-style: none;
  background: dray;
  width: 100%;
  font-size: 0;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  font-size: 15px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.5);
  padding: 10px;
}

li.search-form {
  width: 100%;
  font-size: 0;
}

li.search-form input[type="search"] {
  width: 80%;
  font-size: 15px;
}

li.search-form input[type="submit"] {
  width: 20%;
}

<ul>
  <li>Home</li>
  <li>My Account</li>
  <li>Contact</li>
  <li class="search-form">
    <form>
      <input type="search">
      <input type="submit">
    </form>
  </li>
  <li>Sign In</li>
  <li>Register</li>
  <li>Logout</li>
  <li>About</li>
</ul>