Vertical spacing between display:inline divs in a fluid grid

Question

Ok, not too sure where to start...

I'm putting myself together a blogger, completely gutting it's css and just using it as a simple content manager. here is the test site i've been working with http://jamesparishtestblog.blogspot.com/

Ignore the header, its broken, but I know what I'm doing there. My problem is with the film reviews (stolen from apple trailers as temp content). As you resize the page, they flow fluidly into rows of different lengths. Great! Trouble is, the second row (and thus third, fourth, etc.) aligns itself vertically to the bottom of the longest (lowest) div in the above row. However, I want each div to fit neatly below the one above, 15px apart, and to flow neatly if another div is expanded (by clicking read more...).

Placing the divs in a column is ruled out, because I want the top row to contain the most recent posts side by side (with a column they would be below one another on the left hand side).

Set heights for the divs is ruled out too, because the articles need to expand, and for the full desired design, be mis-matched intentionally.

This has been troubling me for hours. I hope I've explained myself clearly, and that someone will can help.

Thanks for your time.

Answer 1

So you want this?

--------------------------
|   __________  _______  |
|   |        |  |     |  |
|   |        |  |     |  |
|   |        |  |     |  |
|   ----------  |     |  |
|   __________  |     |  |
|   |        |  |_____|  |
|   |        |  _______  |
|   |        |  |     |  |
|   ----------  |     |  |
|               -------  |
|________________________|

Without using columns you can't do it relying on CSS alone. You'd need to use some javascript or server side stuff to put things in the right place. Essentially you want a collage, too bad there's no "display: collage"!

Of course, I could be completely misunderstanding you.

Edit:

"any suggestions on the javascript front?"

I use mootools for almost all my sites. I'll define a bit there first:

dispose : takes an element out of the dom and stores it in a variable.

inject : plops an element into the dom.

I'd load these into columns, then dispose all the ones in the "recent" column and inject them back in to the top of the rest of the columns, one for each column. In other words, all the layout is done with CSS, the only javascript going on is putting your "recent" stuff as the top "row".