Top margin float when resizing browser

Question

Okay so I have have a basic HTML page with a number of images: img { display: inline; float: left; height: 150px; }

All works fine unless the browser width is resized to near the edge of the furthest right image, at which point it the last image jumps down a few pixels, see below images:

http://i.imgur.com/1TR38.gif

Firefox 3, tried strict and transitional.

If a width is reduced further, the image wraps down onto the next row (correct behaviour), however if you resize further it does the same to any subsequent images that get close to the right edge of the window.

Any ideas?