title: CSS columns separating divs
body: <p>I am building platform with template like a <a href="https://pinterest.com" rel="nofollow noreferrer">https://pinterest.com</a> and<br>
  I have html structure like this: </p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="content"&gt;
           &lt;div class="content_publisher"&gt;
           &lt;/div&gt;
           &lt;div class="content-text"&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And i have style.css like this:</p>
  
  <pre><code>body {
      width:1358px;
  }
  
  .main {
      column-width:339.33px;
      column-gap: 0;
      column-count:4;
      position:relative;
      top:50px;
      width:100%;
  }
  
  .content {
      display:block;
      margin-bottom:10px;
      width:337px;
      -webkit-box-shadow:inset 0px 0px 10px;
  }
  </code></pre>
  
  <p>My page is devided to 4 columns... Look at the image you will understand what i want exaclty.. 
   <a href="https://i.stack.imgur.com/fPfDp.png" rel="nofollow noreferrer">https://i.stack.imgur.com/fPfDp.png</a> As you can see at the end of the column, The column is separating divs inside in <strong>content</strong> div..</p>