Wrap input text and button elements side by side - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button

Description

Wrap input text and button elements side by side

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">

#main-wrapper {<!-- ww w .  ja v a  2 s  . c  om-->
   text-align:center;
   background: yellow;
   height: 300px;
}
#search-wrapper {
   display: inline-block;
   vertical-align: middle;
   background-color: green;
   padding: 20px 20%;
}
#main-wrapper:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h3 {
   color: #fff;
}
.search-form {
   display: table;
   border: 5px solid red;
   background: #fff;
}
.search-form .cell {display:table-cell; vertical-align:middle;}
.search-form input {
   font-size: 1.3em;
   height: 50px;
   border: none;
}
.search-form button {
   display:block;
   border: none;
   background-color: red;
   height: 50px;
   vertical-align: top;
   cursor: pointer;
}
.button-holder {
   background-color: red;
}


      </style> 
 </head> 
 <body> 
  <div id="main-wrapper"> 
   <div id="search-wrapper"> 
    <h3>Hello there</h3> 
    <form action="" class="search-form"> 
     <div class="cell"> 
      <input type="text" name="q"> 
     </div> 
     <div class="cell button-holder"> 
      <button type="submit"> <span>Search</span> </button> 
     </div> 
    </form> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials