Columns broken with element inside CSS

Question

I'm working on 5 columns, but the elements inside getting broken. I tried to fix this but I have no luck.

Link: http://bit.ly/1NDAnQA

CSS:

.test-wrap {    
 -webkit-columns: 5;
 -moz-columns: 5;
 columns: ;
}

.test-wrap .img {
 display: block;
 margin: 0 0 0.75em;
}

HTML:

<div class="test-wrap">
 <div class="iefsv1"><img src="#" class="home-img"/>
  <h3><strong style="line-height: 2.50em;">1. Shop </strong></h3>
   Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
   <br />
   <a class="buttonv3" href="#">Go to</a>
</div>
<div class="iefsarrowv1"><img src="#"/></div>
<div class="iefsarrowv1"><img src="#"/></div>
<div class="iefsv2"><img src="#" class="home-img"/>
 <h3><strong style="line-height: 2.50em;">2. Downpayment</strong></h3>
  Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
  <br />
  <a class="buttonv3" href="#">Go to</a>
</div>
<div class="iefsarrowv2"><img src="#"/></div>
<div class="iefsv3"><img src="#" class="home-img"/>
 <h3><strong style="line-height: 2.50em;">3. Spread</strong></h3>
 Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum
 <br />
 <a class="buttonv3" href="#" target="_blank">Go to</a>
 </div>
</div>

Answer 1

You should try this using display: inline-block or float: left ( also you don't need css3 to achieve 5 columns, and old browsers won't support it.. ). Negative margins is a bad idea..

.test-wrap {
  width: 100%;

}
.test-wrap > div {
  float: left;
  width: 20%;
}

or

.test-wrap {
  width: 100%;
  font-size: 0;
}
.test-wrap > div {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  width: 20%;
}