Divide divs over 3 columns

Question

I feel like I searched the entire web, but cannot find a way to divide divs with different heights nicely over 3 columns just like on http://www.ing.nl

<div class="main">
  <div class="block13"><h3>header</h3><p>tekst</p></div>
  <div class="block13"><h3>header</h3><p>tekst<br />test</br>higher</p></div>
  <div class="block13"><h3>header</h3><p>tekst</p></div>
  <div class="block13"><h3>header</h3><p>tekst</p></div>
  <div class="block13"><h3>header</h3><p>tekst<br />test</br></p></div>
  <div class="block13"><h3>header</h3><p>tekst</p></div>
  <div class="block13"><h3>header</h3><p>tekst<br />test</br></p></div>
</div>

I tried different method like:

.block13{
  width:40%;
  min-width:400px;
  background-color:#ffffff;
  padding:10px;
  border-bottom:2px; border-top:1px; border-left:1px; border-right: 1px;
  border-bottom-left-radius: 5px; border-bottom-right-radius:5px; ; border-top-left-radius:0px ; border-top-right-radius: 0px;
  border-style: solid;
  border-color: #b1b1b1;
  margin-left:4%;
  margin-top:10px;
}

but also using:

{
  -webkit-column-count: 3; 
  -moz-column-count: 3; 
  column-count: 3;
}

But no matter what I try, it keeps on looking bad. Either it aligns the heights, or it overflows.

I think ing.nl uses angular, is this the way to solve it? If yes, I'll dive into that :)

It looks like the provided page is using Bootstrap for that: http://getbootstrap.com — Kryszal, Aug 25 '15 at 21:24
Probable duplicate - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Aug 25 '15 at 21:32

score 0 · Answer 1 · answered Aug 25 '15 at 21:38

Reduce your from width: 40%; to width: 25% and add float: left; should get you the affect you're looking for. Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/fzesvef1/.

Note: Increase and decrease the width of the Results pane to see the affect.

Divide divs over 3 columns

1 Answers1