I have converted an image gallery from tables to css. Each thumbnail is in a div with float: left, so they line up in a nice grid. There is also a single larger image at the top right of each page. Using float: right on the larger image places it correctly, but depending on the width of the browser window it causes strange spacing of the thumbnails.

Here is the page in css:
http://www.davidterryart.com/illustrations/index.php
(if the first row of thumbnails looks normal, resize the browser window to see the problem)

Here is the style sheet:
http://www.davidterryart.com/styles-site.css

And for comparison, here's the original layout in tables:
http://davidterryart.com/bookcovers/index.html

Is there a way to resolve this? If it weren't for the text I could adjust the height of the larger image so the first row of thumbnails would always break neatly. But with that text there, it's hard to predict where the break needs to be. I tried putting clear:right on the thumbnails, but that just pushes all of them down below the larger image.

Thanks so much for your help!