Here is a table-less block of thumbs in which small thumbs wrap around a larger one.

The calculation of the large thumb size is exactly as it would be if using tables. The HTML is also straightforward, exactly as for a block filled only with single-size thumbs: you simply put the large thumb into a div nested inside the main block. Here is the result.

body {
	margin: 0;
	padding: 0;
	background: #FFF;
	color: #000;
	}
img {
	border: 0;
	}
a {
	color: #00f;
	text-decoration: underline;
	}
a:hover {
	color: #f00;
	}
.wrapper {
	width: 768px;
	margin: 0 auto;
	border: #c103ff 2px solid;
	background: #f9e6ff;
	}
.thumbtable {
	/* uncomment next line to correct Firefox spacing with Strict doctype */
	/* line-height: 1px; */
	margin-bottom: -4px;
	}
html>body .thumbtable { /* see text */
	margin: 0;
	}
.thumbtable img {
	margin: 2px;
	width: 120px;
	height: 160px;
	}
.thumbtable a:link img, .thumbtable a:visited img {
	border: #cc0033 2px solid;
	}
.thumbtable a:hover img, .thumbtable a:active img {
	border: #cc0033 2px dashed;
	}
.bigthumb {
	float: left;
	width: auto;
	height: auto;
	margin-right: -1px;
	}
html>body .bigthumb { /* see text */
	margin: 0;
	}
.bigthumb img {
	width: 248px;
	height: 328px;
	margin: 2px 0 0 2px;
	}
html>body .bigthumb img { /* see text */
	margin: 2px;
	}

Most of the CSS involved is also exactly as it would be if the thumbnails were all the same size. Most. Right at the bottom of the list are the parameters for bigthumb, the class we have given to the large thumbnail div. The div itself is told to float left, to position it correctly, and then the image sizes are set below.

Reasonable so far, but there also some kludges in here to cope with a combination of IE6’s double-margin bug and its 3-pixel jog. Basically IE does not like adjoining divs which involve floats and margins and without attention, we would have 3 pixels extra horizontally and 4 extra vertically.

Until recently I would have used what is called the star hack to get around this. That hack involved something like *html divname to set a parameter which all the browsers except Explorer would ignore. But IE7 in Standards mode is not going to support that hack, so I sneaked up on the problem from behind. First I tell all the browsers to set a bottom margin of -4px for the thumbtable class, to get rid of this unwanted space. Then I use html>body .thumbtable to tell all the browsers except Explorer that all the margins should in fact be zero. Similar entries lower down the CSS reduce the right and lower margins around the big thumb. It’s nasty but it works, and unless IE7 has a surprise up its sleeve, it should produce this block as we want too.

And that is all there is to it. The only other thing to note is that if you choose a Strict doctype, for the sake of Firefox, you will need to set the line-height to a very small measure, so you do not see extra spacing between the rows of thumbs.