Align two responsive divs, side by side within its container div element - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Align two responsive divs, side by side within its container div element

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Sebastian Graz</title> 
  <style>
div {<!--   www .jav  a  2 s . c om-->
   min-height:201px;
   display:block;
   width:100%;
   background:Chartreuse;
   border:2px solid yellow;
}

.wrapper {
   margin-top:13px;
   display:flex;
   box-sizing:border-box;
   padding:33px 17px;
}

.wrapper>div {
   box-sizing:border-box;
   width:calc(51% - 33px);
   float:left;
   margin:0 17px;
}

body {
   max-width:601px;
   margin:0 auto;
   color:blue;
}
</style> 
 </head> 
 <body translate="no"> 
  <div></div> 
  <div class="wrapper"> 
   <div>
     box 1 
   </div> 
   <div>
     Lots of content here Lots of content hereLots of content hereLots of content here Lots of content hereLots of content hereLots of content here Lots of content hereLots of content hereLots of content hereLots of content hereLots of content hereLots of content here Lots of content hereLots of content here Lots of content here Lots of content hereLots of content hereLots of content here Lots of content hereLots of content hereLots of content here Lots of content hereLots of content hereLots of content hereLots of content hereLots of content hereLots of content here Lots of content hereLots of content here 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials