I am having a problem with my positioning when viewing in different resolutions. So if I re-size my browser window, the positioning on the span pop up is different than if the window was maximized. and it changes for every computer. It's the same code on this site for the CSS Image Gallery, with a couple of modifications. I have been knocking my head against a wall for a day and can't figure out how to make this not happen.

1280x960 is perfect. but that's the only one.

any help would be greatly appreciated!

Code:
.thumbs {
	position:relative;
}
.thumbs img {
	
	border: 1px solid #5b5b5b;
	margin: 25px 25px 25px 65px;
	background-color:#FFF;
}
.thumbs img {
	border: 1px solid #5b5b5b;
	margin: 25px 25px 25px 65px;
	background-color:#FFF;
}

.thumbs:hover {
	background-color: transparent;
}
.thumbs:hover img {
	border: solid 1px #93C;
}
.thumbs span {
	position:absolute;
	background-color:#FFF;
	padding:5px;
	left:1000px;
	border:solid 1px #5b5b5b;
	visibility:hidden;
	text-decoration:none;
	color:#000;
}
.thumbs span img{
	border-width:0;
	padding:2px;
}
.thumbs:hover span {
	visibility:visible;
	top:0;
	left:150px;
	z-index:50;
}

/*img gallery start*/
.thumbs{
position: relative;

}

.thumbnail img{
border: 1px solid #5b5b5b;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

/*.thumbnail:hover img{
border: 1px solid #5b5b5b;
}
*/

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px ridge gray;
visibility: hidden;
color: #5b5b5b;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 580px; /*position where enlarged image should offset horizontally */
top:155px;
z-index: 50;
}