CSS3 Set gap between the columns Examples

First Page
Next Page

CSS3 Set gap between the columns Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 multi-column layouts Examples</title>
      <style type="text/css">
         p {
            -webkit-column-count: 3;
            -webkit-column-gap: 100px;
            -moz-column-count: 3;
            -moz-column-gap: 100px;
            column-count: 3;
            column-gap: 100px;  
         }
      </style>
   </head>
   <body>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Ut bibendum nisi egestas suscipit gravida. Sed velit nisl, 
      tristique sed dui mollis, porta tempus ligula..</p>
   </body>
</html>

Output

First Page
Next Page