Mysterious gap between divs in image slider

I built a quick jQuery image slider today, but there's one problem. The images, which are inside divs, have a gap between them, offsetting them.

I've isolated the problem here: http://jsfiddle.net/UgzsH/

float: left; gets 开发者_开发百科rid of that gap, but apparently because of the elements they are in, they stack vertically.

Unfortunately from this computer I can only test in Firefox. Thanks for any help.

Test case uses http://placekitten.com/.

Floating is how you get rid of the gap, but the last floated element is dropping down because the container is too small. The reason you get the gap is because elements that are display: inline with each other preserve the whitespace you get from the markup itself - if you remove the whitespace (meaning line-breaks) you'll notice the gaps go away. This makes your markup uglier, or course, hence why you use float instead. Make your containing div wider and they'll fit.

It's because in your HTML you have spaces between the divs and such. Try putting all the images and divs in one line of your HTML without spaces between the tags. No spaces!

Hope this helps and good luck!

EDIT: Here's the updated code. It looks a bit messy, but there are no spaces any more!