make floating DIV list appear in columns, not rows - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

make floating DIV list appear in columns, not rows

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

ul {<!--  ww  w  .j a va2  s  .  c  om-->
   -moz-column-count: 2;
   -moz-column-gap: 20px;
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
   column-count: 2;
   column-gap: 20px;
}


      </style> 
 </head> 
 <body> 
  <ul> 
   <li>A</li> 
   <li>B</li> 
   <li>C</li> 
   <li>D</li> 
   <li>E</li> 
   <li>F</li> 
   <li>G</li> 
   <li>H</li> 
   <ul> 
   </ul> 
  </ul>  
 </body>
</html>

Related Tutorials