Create Flexbox layout in two columns, left column is narrow with several sections stacked - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Create Flexbox layout in two columns, left column is narrow with several sections stacked

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  cimmanon</title> 
  <style>
body, html {
   width:100%;
   height:100%;
   margin:0;
   padding:0;
}

div {<!--  www .  ja  v a  2  s .  c o m-->
   text-align:center;
}

.box {
   display:-webkit-flex;
   display:flex;
   -webkit-justify-content:center;
   justify-content:center;
   -webkit-align-items:center;
   align-items:center;
   width:100%;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="wrapper" style="margin:auto;background-color:yellow;height:100%;"> 
   <div style="width:50px;height:100%;"> 
    <div class="fluid-column" style="height:80%;background-color:green;"> 
     <div class="box" style="background-color:#ff99cc;height:25%;">
       1 
     </div> 
     <div class="box" style="background-color:#ff33cc;height:50%;">
       2 
     </div> 
     <div class="box" style="background-color:#ff66cc;height:25%;">
       3 
     </div> 
    </div> 
    <div class="fix-column" style="height:20%;background-color:violet"> 
     <div class="box" style="background-color:orange;height:50%;">
       Total 
     </div> 
     <div class="box" style="background-color:blue;height:50%;">
       Test 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials