get rid of padding when using CSS3 columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

get rid of padding when using CSS3 columns

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

.columns {
   -webkit-column-count: 2;<!--from   ww  w.  ja  va 2s. c o m-->
   -webkit-column-gap: 0;
   width: 404px;
   overflow: hidden;
}
.item {
   display: block;
   width: 200px;
}
.columns {
   counter-reset: xyz-counter;
   background-color: pink;
   border: 1px solid red;
}
.item {
   counter-increment: xyz-counter;
   background-color: lightgreen;
   border: 1px solid green;
}
.item::before {
   content: counter(xyz-counter, decimal);
   text-align: center;
   display: block;
   padding: 20px 0;
}


      </style> 
 </head> 
 <body> 
  <div class="columns"> 
   <div class="item" style="height: 60px"></div> 
   <div class="item" style="height: 90px"></div> 
   <div class="item" style="height: 100px"></div> 
   <div class="item" style="height: 200px"></div> 
   <div class="item" style="height: 60px"></div> 
   <div class="item" style="height: 80px"></div> 
   <div class="item" style="height: 100px"></div> 
   <div class="item" style="height: 60px"></div> 
   <div class="item" style="height: 140px"></div> 
   <div class="item" style="height: 60px"></div> 
   <div class="item" style="height: 200px"></div> 
  </div>  
 </body>
</html>

Related Tutorials