CSS: letting divs overlap properly?

Question

The problem can be seen at http://dev.breinwijzer.be/agenda-2012.

I have a range of divs that share the drupal- generated class .views-row. These divs need to grow vertically. Most of them do, but the recent ones that are added on top, overlap. Here’s what I’ve tried so far:

I’ve tried min-height, but that only makes the height of the div go across the page. Now I just left a combo of min-height and height Obviously since they're divs they're displayed as block so I no need to change anything there I think.

On another site i’ve come across someone’s solution using a combination of clear:both and then overflow:auto. This combination actually didn’t make scrollbars showing but rather the divs respecting eachothers height because of it. But not this time, this time we’re seeing scrollbars when doing this combination.

Obviously no position:absolute; - why would one?

So i’m really out of ideas.

Answer 1

The problem is your HTML, not your CSS.

Your first "views-row" is containing the rest of the rows, these should be outside of it. As you can see, the selected block and the blocks below that should not be contained with that parent, they should be siblings of that element.

To help further I'd need to see how you're outputting the HTML.