Question

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.

The rough HTML I have right now is something like this:

<table id="portfolio">
      <tr>
          <td>
            <div class="portfolioItem">
              <div class="portfolioItemImage">
                 <a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
              </div>

              <br clear="both" />

              <div class="portfolioItemDescription">
                <h3>Title</h3>
                <p>Description lorem ipsum etc.</p>
              </div>
            </div>
          </td>
       </tr>
    </table>

Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn’t relevant here.

Here is the CSS associated with it:

  #portfolio {
    width:100%;
  }

  #portfolio td {
    width:33%;
  }

  #portfolio .portfolioItem {
    border: 1px solid #000;
  }

  #portfolio .portfolioItem .portfolioItemImage {
    margin:0px;
    padding:0px;
  }

Again; can this be done? And how?

Thank you!

Answer 1

I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.