Clickable DIV or similar?

[Sturm]

Salutations. I've got a problem that has stumped me for hours, now. My HTML/CSS knowledge is pretty good, but I'm no expert. I also have no knowledge of Javascript or any other type of programming or scripting language, beyond downloading the Lightbox v2 package and implementing it into my site.

I've got an image gallery on my portfolio site using Lightbox v2. To avoid making two or three copies of images and using a rollover effect to make the thumbnail look clickable, I want to use simple CSS. I'm currently using the illegal method of wrapping a DIV inside an A tag. Here's an image of how it looks, with the cursor hovering over one of the thumbnails:
http://i56.tinypic.com/23r3bxd.jpg
Even though it isn't good code, it works across all browsers.

Now, however, I want some of my thumbnails to have an additional, small "PDF" div that links to a PDF document of the image in question (which will be a multi-page magazine layout or something) for download. I put one on that image above in Photoshop so you can see how I want it to look. However, as you can imagine, there's no way to have a div surrounded by an anchor, then surrounded by another div that is, in turn, surrounded by an anchor.

I welcome any and all ideas. Currently, each thumbnail is an anchor, a div inside it with that dark gray background and padding to make it visible, then the image itself.

The HTML:

<a href="images/Photography/Miscellaneous/Misc14z.jpg" rel="lightbox[Photos_Misc]">
<div class="thumb">
<img src="images/Photography/Miscellaneous/Thumbs/t_Misc14z.jpg" alt="Misc14z" width="80" height="80" />
</div>
</a>
The CSS:

.photoSet .thumb {
background-color: #3e3e3e;
padding: 5px 5px 20px;
float: left;
margin: 5px;
border: 0px;
}

.photoSet a:hover .thumb {
background-color: #999;
}

Please help.