HTML/CSS Images layout problem

Hey guys, I have a HTML/CSS question,

so I have a set of images with different size, and I wanted to create something like a photo gallery page
the thing is since the images are in different size, so when I lay them out, i want them to be fit in by themselves

please check out the picture, maybe is easier to understand what i meant

here are some of my codes for handling images (css)

	.thumbs {
		width:100%;
		overflow:hidden;
	}
		.thumbs li {
			float:left;
			width:auto;
			height:auto;
			overflow:hidden;
			margin:0 10px 10px 0;
			display:inline;
			position:relative;
		}
		.thumbs li.first {
			margin-left:496px;
		}
			.thumbs li a {
				display:block;
				position:relative;
				width:auto;
				height:auto;
				overflow:hidden;
				z-index:1;
			}
				.thumbs li a img {
					display:block;
					position:relative;
					z-index:1;
				}
			
			.thumbs li span {
				display:block;
				width:121px;
				height:121px;
				position:absolute;
				left:0;
				top:0;
				z-index:10;
				cursor:default;
				background:url(images/blank.gif) no-repeat 0 0;
			}

Code (markup):

i set the float to left, so is helping me to align it row by row, but it able to have the effect from my sample pictures

please help thanks everyone