How do I distribute divs evenly in my search results in a masonry type of layout?

You can see the product listing on my site here:
http://demo.missionfamily.org/index.php?route=common/homeproduct
There is a red button called "VISUALIZZA I RISULTATI" please click it to see all products on the site.
You will notice that some rows have empty spaces. That is due to the fact that neighbouring items are too tall and they are causing other items to go to next row.

Could someone suggest a working solution? I don't mind even if the soluton is css based as long as it works.

I tried both brick-by-brick and masonry without much success :(
Brick-by-brick causes conflicts on page with other working elements.
Masonry doesn't work and causes some conflicts too.

thanks
badwolfffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
You are using the Monarch Wordpress theme, correct?

It has a "Block Grid" feature. According to the documentation:
Block Grid
Block grids are made from a ul.small-block-grid-# or ul.large-block-grid-#. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the small-block-grid only, the grid will keep its spacing and configuration no matter the screen size. If you use large-block-grid only, the list items will stack on top of eachother for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.
Demonstrated near the bottom of this demo.
http://themeforest.net/item/monarch-responsive-multilanguage-theme/full_screen_preview/7556268
badwolfffAuthor Commented:
No I am not using monarch wordpress theme. The site is not in wordpress. What reference you might have found to monarch is a plugin that I am trying to integrate to show social sidebar, nothing more. :(
badwolfffAuthor Commented:
For the time being I have set the div height to 500px but that is only a temp solution :(
Tom BeckCommented:
Okay, I see that now.

The standard way to handle a grid like this in bootstrap is to add clearfix divs where needed.

Example: If you have this in the markup for each item in the grid.

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 product-block">

Then for sm screens you add a clearfix div between every two items.

<div class="clearfix visible-sm-block"></div>

For lg screens, add a clearfix div every four items.

<div class="clearfix visible-lg-block"></div>

 Add a clearfix div every three for md screens.

<div class="clearfix visible-md-block"></div>

Here's a demo of what I'm suggesting using your content.

http://jsbin.com/pibiludala/1/edit?output

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.