CODEWITHSUNDEEP
htmlcss
Krepps
Krepps

Reputation: 11

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/.

Upvotes: 1

Views: 835

Answers (2)

Jeff Gortmaker
Jeff Gortmaker

Reputation: 4737

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!

Upvotes: 1

kinakuta
kinakuta

Reputation: 9037

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.

Upvotes: 1

Related Questions