Found the old solution. This is heavily mutated 2.0.x so would need Elkification, but that shouldn't be a big deal. Will look into that sometime this week. Anywayz, markup as it stands is just this:
echo '
<div class="attachment_block">';
if ($attachment['is_image'])
{
if ($attachment['thumbnail']['has_thumb'])
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" onclick="', $attachment['thumbnail']['javascript'], '"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" class="attachment_image" /></a>';
else
echo '
<img src="' . $attachment['href'] . ';image" alt="" class="attachment_image" width="' . $attachment['width'] . '" height="' . $attachment['height'] . '"/>';
}
echo '
<a href="' . $attachment['href'] . '" class="attachment_name">' . $attachment['name'] . '</a>
<span class="attachment_details">', $attachment['size'], ($attachment['is_image'] ? ', ' . $attachment['real_width'] . 'x' . $attachment['real_height'] . ' - ' . $txt['attach_viewed'] : ' - ' . $txt['attach_downloaded']) . ' ' . $attachment['downloads'] . ' ' . $txt['attach_times'] . '</span>';
if (!$attachment['is_approved'] && $context['can_approve'])
echo '
<a href="', $scripturl, '?action=attachapprove;sa=approve;aid=', $attachment['id'], ';', $context['session_var'], '=', $context['session_id'], '" class="approval">', $txt['approve'], '</a> - <a href="', $scripturl, '?action=attachapprove;sa=reject;aid=', $attachment['id'], ';', $context['session_var'], '=', $context['session_id'], '" class="deletion">', $txt['delete'], '</a>';
echo '
</div>';
So that's pretty much bare bones markup. One container div per attachment, then just the required anchor or two (depending on thumbnail or not), the image, and span for the details (size, downloads, etc).
The CSS looks like this:
/* Important stuff. */
.attachment_block {
display: inline-block;
max-width: 99%;
min-width: 21em;
margin: 0 3px;
vertical-align: bottom;
text-align: center;
overflow: hidden;
}
/* Just eye candy. */
.attachment_image {
margin: 25px 0 0 0;
}
.attachment_name, .attachment_details {
/* Important stuff. */
display: block;
/* Just eye candy. */
background: #1a1a1a;
border: solid 1px #333;
background: #0f0f0f;
color: #888;
border-bottom: 1px solid #222;
}
/* Just eye candy. */
.attachment_name {
margin: 5px 0 0 0;
border-bottom: none;
}
/* Important stuff. */
.attachment_name:before {
display: block;
clear: both;
content: "";
}
/* Just eye candy. */
.attachment_details {
border-top: none;
border-radius: 0 0 8px 8px;
}
/* Important stuff. */
/* Auto scaling of images in posts, sigs, attachments, etc. */
/* @todo - Cross check where this is defined earlier */
.inner .bbc_img, .signature .bbc_img, .attachment_image {
height: auto;
width: auto;
max-width: 100%;
max-height: 800px;
}
So it does have a max and min width set on the container div, but no width as such. This is what allows it to expand when the thumbnail is clicked. When the thumbnail is displayed, the blocks just collapse to min-width. When you click the image, the container div can expand to a maximum of 99% of post div width (this setup always scales the expanded image to fit available post width, which is what most people probably want most of the time). The image inside the container is set to max-width of 100% of the container, so it never overflows. This works because the inline styles set by the PHP only set image width and height, which get overridden by the maximums set in the CSS. Is all quite nifty if I do say so myself. 
You could easily set this up to do a highslide type of display, simply by appending an extra class (like zomfg_highslidez) and having CSS do something like:
.attachment_block.zomfg_highslidez {
position: fixed;
z-index: 99;
left: 0;
right: 0;
etc, whatever...
}
Modern, Free, Powerful