For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.

No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.

The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.

Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.

Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);

Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.

3 Answers
3

I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.

The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)

Allright! I'm open to all suggestion! div's would be fine. The min-width probably evens them out nicely. But I would like to give it a little more eye candy by inserting the colored div's
–
Gerald VersluisAug 27 '12 at 14:49