I'm trying to create masonry layout using CSS3 multi-column but have some problem. The last item have extra padding that push the bottom element lower tot the bottom. I want to remove that extra bottom padding so the multi-column element have narrower bottom padding to the element below it. Here's the bottom padding that I want it to be removed.

**This is the image of my problem :**

![This is the image here](https://i.stack.imgur.com/JVexB.png)

here's the markup.

```
<div class="span8" id="content-wrapper">

  <div class="content" id="container">
    <article class="item"> ... </article>
    <article class="item"> ... </article>
    <article class="item"> ... </article>
    <article class="item"> ... </article>
  </div>

  <nav class="pagination loop-pagination">
    <a class="prev page-numbers" href="#">Previous</a>
    <a class="page-numbers" href="#">1</a>
    <span class="page-numbers current">2</span>
    <a class="page-numbers" href="#">3</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="#">5</a>
    <a class="next page-numbers" href="#">Next</a>
  </nav>

</div>

.content {
    overflow: hidden;
    column-count: 2;
    -webkit-column-count: 2;
    column-gap: 25px;
    -webkit-column-gap: 25px;
    column-fill: auto;
    -webkit-column-fill: auto;
}
.item {
    margin-bottom: 3em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

```

And here's the [JSFiddle](http://jsfiddle.net/urztrauk/). Is it possible to do that? thanks.

**Edit:**

If possible, I want to keep column-break-inside: avoid; , the content got cut off if column break inside removed. 

[http://imgur.com/RRrST41](https://imgur.com/RRrST41)

Also depending on the content size, the extra bottom padding varied on its size. All I want is to make it behave like jQuery Masonry.

Thanks.