Expandable Search Form - html

Question

I am working on Expandable Search but facing one problem. When i click on search bar then search bar is expanding. But right side content is moving down. I wanna hide right side content when search bar is expand similar to stackoverflow search bar.
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
background-color: #FAFAFB;
border-top: 3px solid #F48024;
float: left;
padding-bottom: 10px;
-moz-box-shadow: 3px 3px 5px 1px #ccc;
-webkit-box-shadow: 3px 3px 5px 1px #ccc;
box-shadow: 3px 3px 5px 1px #ccc;
}
.innerheader {
width: 1000px;
margin: auto;
}
.logo_name {
display: inline-block;
margin-top: 13px;
line-height: 1em;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 22px;
}
.ga_a {
float: left;
}
.ga_b {
float: left;
padding: 5px;
padding-bottom: 10px;
margin-top: 5px;
}
.ga_b ul {
margin: 0px;
padding: 0px;
margin-left: 7px;
line-height:1;
}
.ga_b ul>li {
display:inline-block;
margin-left: 5px;
padding: 5px;
}
.ga_b ul>li a {
text-decoration: none;
color: black;
font-size: 15px;
font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
}
.ga_b ul>li:hover {
background-color: #ECECEC;
}
.ga_c {
float: left;
}
.ga_c input {
outline: none;
}
.ga_c input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
margin-left: 10px;
}
.ga_c input::-webkit-search-decoration,
.ga_c input::-webkit-search-cancel-button {
display: none;
}
.ga_c input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ffffff;
padding: 9px 10px 9px 32px;
width: 175px;
border-radius: 5px;
margin-top: 5px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.ga_c input[type=search]:focus {
width: 400px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
.ga_c input:-moz-placeholder {
color: #999;
}
.ga_c input::-webkit-input-placeholder {
color: #999;
}
.ga_d {
float: left;
}
.ga_d ul>li {
display: inline-block;
display: fixed;
}
<div class="mainheader">
<div class="innerheader">
<div class="ga_a">
<a class="navbar-brand logo_name" href="#">WebSiteName</a>
</div>
<div class="ga_b">
<ul>
<li>Text One</li>
<li>Text Two</li>
<li>Text Three</li>
</ul>
</div>
<div class="ga_c">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</div>

Answer 1

You can do it with the positioning:
* {box-sizing: border-box} /* recommended */
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
min-width: 1000px; /* added / needs to match the .innerheader width */
margin: 0 auto; /* added */
background-color: #FAFAFB;
border-top: 3px solid #F48024;
float: left;
padding-bottom: 10px;
-moz-box-shadow: 3px 3px 5px 1px #ccc;
-webkit-box-shadow: 3px 3px 5px 1px #ccc;
box-shadow: 3px 3px 5px 1px #ccc;
}
.innerheader {
width: 1000px;
margin: 0 auto; /* modified */
}
.logo_name {
display: inline-block;
margin-top: 13px;
line-height: 1em;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 22px;
}
.ga_a {
float: left;
}
.ga_b {
float: left;
padding: 5px;
padding-bottom: 10px;
margin-top: 5px;
}
.ga_b ul {
margin: 0;
padding: 0;
margin-left: 7px;
line-height: 1;
}
.ga_b ul>li {
display:inline-block;
margin-left: 5px;
padding: 5px;
}
.ga_b ul>li>a {
text-decoration: none;
color: #000; /*black*/
font-size: 15px;
font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
}
.ga_b ul>li:hover {
background: #ECECEC;
}
.ga_c {
position: relative; /* needs to be set because of the absolute positioned child */
float: left;
}
.ga_c input {
outline: none;
}
.ga_c input[type=search] {
position: absolute; /* needs to be positioned absolutely, i.e. be removed from the normal document flow so that it can "overlay" and other element, of course the z-index needs to be set */
z-index: 9999; /* usually something big just to be sure it stays on top / in front of everything else */
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
margin-left: 10px;
}
.ga_c input::-webkit-search-decoration,
.ga_c input::-webkit-search-cancel-button {
display: none;
}
.ga_c input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #fff;
padding: 9px 10px 9px 32px;
width: 175px;
border-radius: 5px;
margin-top: 5px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.ga_c input[type=search]:focus {
width: 400px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
.ga_c input:-moz-placeholder {
color: #999;
}
.ga_c input::-webkit-input-placeholder {
color: #999;
}
.ga_d {
position: relative; /* positioned relative to its normal position so that we can move it with "directional" properties */
left: 229px; /* moved to the right by the width of the .ga_c (inspected the element) */
float: left;
}
.ga_d ul>li {
display: inline-block;
display: fixed;
}
<div class="mainheader">
<div class="innerheader">
<div class="ga_a">
<a class="navbar-brand logo_name" href="#">WebSiteName</a>
</div>
<div class="ga_b">
<ul>
<li>Text One</li>
<li>Text Two</li>
<li>Text Three</li>
</ul>
</div>
<div class="ga_c">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</div>

Answer 2

With your structure, it is not possible using css only. However if change the structure you could have something like this.
*{
box-sizing: border-box;
font-family: arial;
}
input{
padding: 10px;
background: #eee;
border: 1px solid #ddd;
display: inline-block;
transition: .3s;
margin-right: 10px;
width: 250px;
}
input:focus{
width: 400px;
}
input:focus + div{
opacity: 0;
visibility: hidden;
}
ul{
padding: 0;
margin: 0;
}
ul li{
display: inline;
margin-right: 5px;
}
div {
display: inline-block;
transition: .3s;
}
<input type="search" placeholder="Search">
<div class="ga_d">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>