I have a number of pictures that I'm 'displaying' on my site. Each picture comes with a faint 'reflection', which is located *excatly* underneath the main picture, and then each picture also has an associated information box, located to the right and just below the main picture (attached).
To bring the reflection up to touch the main picture, it's a simple case of wrapping the reflection in a DIV and then using Relative Position to move the information box 50 pixels up. That way my GIF overlays over the shadow. I'm open to suggestions on a better way.
There is a catch though - each picture has a different height, which means that when the main picture changes, the offset I've used in bring the info box into position doesn't work anymore! Ideally I'd like to know how I could make this happen with DIVs and either the main picture or info box (or box) and then put these into my global.css for all 60 pages! Otherwise each page needs it's own rule, which is not only tedious, but makes it very difficult to maintain if I start swapping the pictures (with different heights) around.
Any help would be most appreciated.
Thanks in advance...