10

The HTML scheme is following:

<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

.item CSS style:

float: left;

And the result: enter image description here

But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.

Thank you

user984621
  • 46,344
  • 73
  • 224
  • 412

2 Answers2

17

You can use CSS 3 column-width and column-gap like this..

http://www.bootply.com/118335

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    Thanks Skelly. This is basically what I am currently using, but what bothers me is the fact that the newest items are displayed in the first column, not in the first row, which makes them not very visible for visitors. – user984621 Mar 03 '14 at 15:19
  • Not possible without css3 or JavaScript. This would mean you would need to position your elements absolutely on the page every time. Doesn't really scale well :) – Oz Lodriguez Mar 05 '14 at 14:08
0

I run into the exact same problem and I found this one that worked for me.

https://github.com/kudago/waterfall

It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.

The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.

Hope this helps.

Ray
  • 12,101
  • 27
  • 95
  • 137