Wrap vertically like a column for list of div section - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Wrap vertically like a column for list of div section

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">

.submenu {<!--from w  ww  .j a  va2s  .  co  m-->
   -webkit-column-count: 2;
   -webkit-column-gap:   20px;
   -moz-column-count:    2;
   -moz-column-gap:      10px;
   column-count:         2;
   column-gap:           10px;
}
.submenu{height:200px;border:solid 1px red;}
.menu{background:green;padding:2px;margin:2px;color:white}


      </style> 
 </head> 
 <body> 
  <div class="submenu"> 
   <div class="menu"> 
    <span> item1 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item2 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item3 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item4 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item5 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item6 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item7 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item8 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item9 <span></span> </span> 
   </div> 
   <div class="menu"> 
    <span> item10 <span></span> </span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials