css slide-out divs in grid arrangement

Question

I'm trying to create a "grid" of "blocks" that when hovered over will reveal some text in a div beneath it. In the example I've got everything how I'd like it but- is there a way to make it work in the arrangement I have it in?

What I'd like is for only the bottom div to push down (like the bottom-left one in the example) when the one above it is "expanded". But obviously I'm not getting something right since it creates a giant gap and it's not showing the animation either.

The way the bottom div reacts in the second column is not what I'm going for, though.

Any ideas?

Thanks, appreciate it!

http://jsfiddle.net/nbFkZ/

Answer 1

Through your comments, i think i understood your question finally:

What I've done:

1. I've moved the second and third li into a new UL-elements.
2. And let both UL elements float to the left.

The HTML is a bit to much to post here, so i just post the CSS:

ul.things {
    list-style: none;
    float: left;
    width: 240px;
}

ul.things li {
    display: inline-block;
    /*float:left;*/
    margin:15px;
}

HTML, CSS & Live Demo: http://jsfiddle.net/nbFkZ/4/

Hope it helps :)