Align form to the bottom centered with flexible width and fixed button - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Center

Description

Align form to the bottom centered with flexible width and fixed button

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#searchbar {<!--from   ww w .j av  a 2 s .  co  m-->
   position:fixed;
   bottom:21px;
   left:0;
   width:100%;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}

.input-wrapper {
   position:absolute;
   right:111px;
   left:0px;
   top:0px;
   bottom:0px;
}

.form-wrapper {
   position:relative;
   left:0px;
   top:0px;
   width:51%;
   height:38px;
   display:inline-block;
}

.form-wrapper input {
   height:100%;
   width:100%;
   padding:9px 11px;
   float:left;
   color:Chartreuse;
   border:0;
   background:yellow;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
}

.form-wrapper button {
   position:absolute;
   right:0px;
   top:0px;
   overflow:visible;
   border:0;
   padding:0;
   cursor:pointer;
   height:38px;
   width:105px;
   color:blue;
   background:red;
}

.form-wrapper button::-moz-focus-inner {
   border:0;
   padding:0;
}
</style> 
 </head> 
 <body> 
  <div id="searchbar"> 
   <form class="form-wrapper"> 
    <div class="input-wrapper"> 
     <input type="text" placeholder="Input text here"> 
    </div> 
    <button type="submit">Search</button> 
   </form> 
  </div>  
 </body>
</html>

Related Tutorials