[font=verdana]Not easily, at least if you want to maintain full compatibility. One solution is to force all the boxes in each row to be the same height, by using display:table;. The other, as being discussed in another thread uses Javascript to haul the boxes into line.
The third way is to reorder your code and have columns rather than rows, but then you are relying far more heavily on manually setting up the page so that you have the right number and size of boxes in each column, which obviously is more work and is less robust if you want to edit the content.
Tried to implement the Vanilla Masonry on the page but did nothing. These are lists items and being pulled in through Facebook I can’t really change them to divs but figured wouldnt really matter but still doesnt work, didn’t do anything. I’d rather not make all the same height if don’t need to, hopefully theres a way to make it work hoping I’m just missing something.
Almost got it but not quite, it does it perfectly but for some reason when you get down further the lists dont really float to the left after it gets down to the second row.
With the example you posted above is great but if the boxes have different heights smaller boxes will have a large white space after it which is why used the Masonry approach which works well but just need the items to fall in proper order.
I had to dig around a bit just to come up with the ones we’ve given you, and personally, I think they do what you need. Does it really matter what order they fall into? There may be a way to tweak the ordering in the JS, but it’s not my area, I’m afraid.