Make three boxes inline, in the same line with content alignment - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Parent Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Parent Container

Description

Make three boxes inline, in the same line with content alignment

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.wrapper>div {
   border:2px solid Chartreuse;
   float:left;
   width:251px;
   height:301px;
   margin:0 11px;
   position:relative;
}

.wrapper {<!--  w w  w .ja v  a  2 s .c  o  m-->
   margin:0 auto;
   width:831px;
}

.wrapper>div>input[type="submit"] {
   position:absolute;
   bottom:21px;
   left:26px;
   display:block;
   width:201px;
}

.clearfix:before, .clearfix:after {
   content:"";
   clear:both;
   display:block;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div> 
    <input type="submit"> 
   </div> 
   <div> 
    <input type="submit"> 
   </div> 
   <div> 
    <input type="submit"> 
   </div> 
  </div> 
  <div class="clearfix"></div>  
 </body>
</html>

Related Tutorials