Align 2 buttons in a DIV for a mobile responsive site - HTML CSS CSS Form

HTML CSS examples for CSS Form:Button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. Button

Description

Align 2 buttons in a DIV for a mobile responsive site

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.main-container{<!--from ww  w. ja v  a2s .c  o m-->
   width:80%;
   max-width:25em;
   margin-left:10%;
   margin-right:10%;
   background-color:red;
   border:1px solid #7a9cb8;
   border-radius:1px;
   -webkit-box-shadow: 1px -1px 2px 1px rgba(0,0,0,0.5);
   -moz-box-shadow: 1px -1px 2px 1px rgba(0,0,0,0.5);
   box-shadow: 1px -1px 2px 1px rgba(0,0,0,0.5);
}
.text-container{
   margin-left:5%;
   margin-right:5%
}
.paragraph{
   margin-bottom:4%;
   margin-top: 4%;
}
#middlebox{
   background-color:#1d2f3d;
   border-top:1px solid #171616
}
#container{
   background-color:#969a9d;
   display:flex;
}
#left {
   width:50%;
   background: #f4f4f4;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0px;
   -webkit-box-shadow: 0px 2px 3px #EEE;
   -moz-box-shadow: 0px 2px 3px #EEE;
   box-shadow: 0px 2px 3px #EEE;
   font-family: Arial;
   color: #000;
   font-size: 20px;
   padding: 1% 3% 1% 3%;
   text-decoration: none;
   margin: 2% 1% 2% 2%;
}
#right {
   width:50%;
   background: #f4f4f4;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0px;
   -webkit-box-shadow: 0px 2px 3px #EEE;
   -moz-box-shadow: 0px 2px 3px #EEE;
   box-shadow: 0px 2px 3px #EEE;
   font-family: Arial;
   color: #000;
   font-size: 20px;
   padding: 1% 3% 1% 3%;
   text-decoration: none;
   margin: 2% 2% 2% 1%;
}

      </style> 
   </head> 
   <body> 
      <br> 
      <div class="main-container"> 
         <div class="text-container"> 
            <div class="paragraph"> 
               <div id="headingtext"> 
                  <span>Security information</span> 
               </div> 
            </div> 
         </div> 
         <div id="middlebox"> 
            <div class="text-container"> 
               <div class="paragraph"> 
                  <span> blabla bla bla.  blabla bla bla.  blabla bla bla. 
                   blabla bla bla.  blabla bla bla.  blabla bla bla.  blabla bla bla. 
                    blabla bla bla.  blabla bla bla.  blabla bla bla. 
                     blabla bla bla.  blabla bla bla.  blabla bla bla. 
                      blabla bla bla.  blabla bla bla.  blabla bla bla. 
                       blabla bla bla.  blabla bla bla.  blabla bla bla. </span> 
               </div> 
            </div> 
            <div id="container"> 
               <div id="left"> 
                  <a href="#">Cancel</a> 
               </div> 
               <div id="right"> 
                  <a href="#">Confirm</a> 
               </div> 
            </div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials