Items are overlapped in layout of category page in Joomla (due to container height attribute)

Question

I'm developing a website using Joomla 3.2.1, K2 and creativia template. I've already done quite a lot of customization and everything works fine. I've only one, big problem. When I select a category to have a list of items, it results in a mess of overlapped images (meaning that all items are displayed but the layout does not work). If I simply reload the page (or even open firebug to check the page properties), everything is back correctly to his place.

You can check the problem here: http://www.nicolamontera.it/NewVersion

Just open the menu item Architettura or Grafica (it happens from time to time).

EDIT: From further investigation I found that the attribute height in the container DIV changes quite randomly when loading the page. If I get a small value, then everything is messed up. It seems to be something related to a timing in evaluating that value (which is calculated dynamically).

How can I fix that?

Answer 1

Use a clearfix that will fix this problem you are having. Please let me know if it works.

so i used the class "group" and put that as a div in HTML where it is collapsing. If you have a container over these elements you have issues with the put this class with the container along side.

.group:after{
    content: "";
    display: table;
    clear: both;
}