Even out space layout (table) - html

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.

Answer 2

I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }​

Answer 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)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.