Responsive 100% width search bar that accounts for the other nav elements

Question

I'm trying to create a navbar similar to youtube, where there is two divs that are each floated to the opposite sides of the screen. In the middle I'm trying to make a searchbar which expands to fill the remaining space. When the user resizes their browser, the searchbar's width should contract to allow for a responsive layout. I cannot for the life of me figure out how to do this. Whenever I am able to get the searchbar to be responsive, it causes the right floated div to be pushed underneath it, and wont start collapsing in on itself until it reaches the very edge of the screen. I want it to start collapsing as soon as it hits the right floated div.

Here is the html:

 <header>

    <nav id="page-nav-left" role="navigation"> </nav>

    <form id="searchBar-form">
        <input type="text" id="searchBar" placeholder="Search...">
    </form>

    <nav id="page-nav-right" role="navigation"> </nav>

 </header>

The CSS is all in this fiddle: http://jsfiddle.net/L9qvpL32/

Answer 1

Perhaps something like this? http://jsfiddle.net/L9qvpL32/2/

I just changed the order of your elements and changed some widths :)

If you don't want the search bar to change position just change to

#searchBar-form {
    position: relative;
    overflow: hidden;
    min-width: 200px;
}

Answer 2

You should try to use flexbox. With flexbox you can float as many divs as you van in the same row, and they will be responsive to the parent and each other as well.

You also able to set, which element should fill the remaining space, and which elements width is fixed to an absolute value.

• display: flex; ==> turns it the flexbox model
• flex-grow: 0/1 (or other) ==> the current box can grow if there is remaining space
• flex-shrink: 0/1 (or other) ==> the current box can shrink if there is less space then the elements width

You can find an amazing tutorial to flexbox here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

header {
    display: -webkit-flex;
    display: flex;
  
	position: fixed;
	top: 0px;
	z-index: 300;
	width: 100%;
	height: 48px;
  
    background-color: blue;
}

#page-nav-left {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  
    width: 100px;
  
    background-color: red;
}	

#page-nav-right {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  
    width: 100px;
    background-color: red;
}

#searchBar-form {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}
#searchBar {
  width: 100%;
  max-width: 400px;
}
  

#searchBar-button {
	padding: 4px 15px;
	border: 0px solid #207cca;
	color: black;
}

<header>
        
		<nav id="page-nav-left" role="navigation"> </nav>

		<form id="searchBar-form">
            
	        <input type="text" id="searchBar" placeholder="Search...">
	    </form>
                
		<nav id="page-nav-right" role="navigation"> </nav>

</header>

Answer 3

    header {
    position: fixed;
        top: 0px;
    z-index: 300;
    width: 100%;
    height: 48px;
    background-color: blue;
    float:left;
}
form{
    width:80%;
    float:left;
}

#page-nav-left {
    display: inline-block;
    height: 100%;
    width: 20%;
    margin: 0 auto;
    padding: 0px;       
    float: left;
    background-color: red;
}   

#page-nav-right {
    display: inline-block;
    height: 100%;
    width: 20%;
    margin: 0 auto;
    padding: 0px;       
    float: left;
    background-color: red;
}

#searchBar-form {
    position: relative;
    overflow: hidden;
    width:60%;
}

#searchBar {
    padding: 4px 15px;
    background-color: white;
    width: 100%;
}

#searchBar-button {
    float: right;
    padding: 4px 15px;
    border: 0px solid #207cca;
    color: black;
}

I am assuming this is what you want. You set your nav's in pixels. Always set width by % for responsiveness. http://jsfiddle.net/L9qvpL32/1/

Answer 4

Is this what you're looking for? (You will need to refine it a bit to stop the search being hidden completely on smaller screens) http://jsfiddle.net/zxctbynn/

<header>
    <div class="left"></div>
    <form id="searchBar-form" class="centre">
        <input type="text" id="searchBar" placeholder="Search...">
    </form>  
    <div class="right"></div>
</header>

header {
    position: fixed;
    top: 0px;
    z-index: 300;
    width: 100%;
    height: 48px;
    background-color: blue;
    display: inline;
}

.left{
    top: 0;
    background-color: red;
    width: 100px;
    height:100%;
    position: absolute;
}

.centre{
    top: 0;
    background-color: blue;
    width: auto;
    left: 100px;
    right: 100px;
    height:100%;
    position: absolute;
    padding: 0;
}

.centre input{
     width: 100%;   
}