Create top banner bar with search text field using flex-container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Create top banner bar with search text field using flex-container

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>#topbanner_content equal width content</title> 
  <style>
*
 {
   box-sizing:border-box;
}

body<!--from   w ww . ja v  a 2s  .  c  o m-->
 {
   margin:0;
   padding:0;
   background-color:Chartreuse;
}

#main
 {
   display:inline-flex;
   min-width:100%;
   flex-flow:column;
   margin:0;
   padding:0;
}

#topbanner
 {
   flex:2 2 auto;
   margin:0;
   padding:21px;
   background-color:yellow;
}

#topbanner_content
 {
   display:flex;
   align-items:center;
}

#topbanner_icon
 {
   background-color:blue;
   flex:0 0 auto;
   height:121px;
   width:121px;
}

#topbanner_searchbar
 {
   flex:2 2 0;
   display:flex;
}

#topbanner form
 {
   margin:0;
   flex:2 2 0;
   display:flex;
}

#topbanner_searchbar_input
 {
   height:41px;
   padding-left:41px;
   flex:2 2 auto;
   border-style:none;
   border-radius:6px;
   font-size:21px;
   font-family:sans-serif;
   color:pink;
}

#main_button_unlogged
 {
   flex:0 0 auto;
   width:231px;
   display:flex;
}

#main_button_unlogged a
 {
   flex:2 2 0;
   display:flex;
   align-items:center;
   justify-content:center;
   margin:0px 3px;
   height:41px;
   border:solid 2px;
   border-radius:6px;
   color:WhiteSmoke;
   transition:color .16s ease-in-out;
   text-decoration:none;
   cursor:pointer;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="main"> 
   <div id="topbanner"> 
    <div id="topbanner_content"> 
     <div id="topbanner_icon"> 
      <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png" id="icon"> </a> 
     </div> 
     <div id="topbanner_searchbar"> 
      <form method="get" action=""> 
       <input id="topbanner_searchbar_input" type="text" name="text" placeholder="Search..."> 
       <input type="submit" hidden> 
      </form> 
     </div> 
     <div id="main_button_unlogged"> 
      <a href="#">Login</a> 
      <a href="#">Register</a> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials