Popups not adjusting vertically to align with icons

HTML & CSS
1

My popup thumbnail images stay at the top of the page and won’t adjust down vertically.

The CSS:

.thumbnail {
    float: left;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    position: relative;
}
.thumbnail:hover {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-color: transparent;
    color: #335500;
}
.thumbnail span {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-color: transparent;
    color: black;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    position: absolute;
    visibility: hidden;
}
.thumbnail span img {
    border-bottom-width: 0;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-width: 0;
}
.thumbnail:hover span {
    left: 155px;
    margin-top: 1px;
    top: 5px;
    visibility: visible;
    width: 700px;
    z-index: 99;
}

And the HTML:

<div align="left"><a class="thumbnail" href="#thumb"><img src="http://www.avwebmaster.com/websiteimages/atraveladysmall.jpg" alt="A Travel Lady website by avwebmaster.com" border="0" /><span><img src="http://www.avwebmaster.com/websiteimages/atraveladylarge.jpg" alt="" width="624px" height="380px" /></span></a></div>

<div align="left"><a class="thumbnail" href="#thumb"><img src="http://www.avwebmaster.com/websiteimages/zrglobalsmall.jpg" alt="Zwillinger Research website by avwebmaster.com" border="0" /><span><img src="http://www.avwebmaster.com/websiteimages/zrgloballarge.jpg" alt="" width="624px" height="380px" /></span></a></div>
2