Create 2 column layout of divs with varied heights where vertical spacing is always the same - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Create 2 column layout of divs with varied heights where vertical spacing is always the same

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--   www. j av a 2 s  . c o  m-->
   font:2em/2.68 'Open Sans', Arial, Sans-serif;
   margin:0;
   background:Chartreuse;
}

.container {
   margin:2.6em;
   padding:0;
   -moz-column-gap:2.6em;
   -webkit-column-gap:2.6em;
   column-gap:2.6em;
   font-size:.86em;
   -moz-column-count:3;
   -webkit-column-count:3;
   column-count:3;
}

.panel {
   display:inline-block;
   background:yellow;
   padding:2em;
   margin:0 0 2.6em;
   width:100%;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-shadow:3px 3px 5px 0 blue;
   text-align:center;
}

.panel1, .panel3 {
   background:pink;
   height:100px;
}

.panel2, .panel4, .panel6 {
   background:WhiteSmoke;
   height:201px;
}

.panel5, .panel7 {
   background:OrangeRed;
   height:151px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="panel panel1">
     1 
   </div> 
   <div class="panel panel2">
     2 
   </div> 
   <div class="panel panel3">
     3 
   </div> 
   <div class="panel panel4">
     4 
   </div> 
   <div class="panel panel5">
     5 
   </div> 
   <div class="panel panel6">
     6 
   </div> 
   <div class="panel panel7">
     7 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials