Question

So, I have this small bit of code that generates rows and columns of boxes with space in-between them.

It seems to work fine; however when I set the height and width of the boxes to 32 pixels and the space in-between them to 8 pixels, there are gaps that start to appear where boxes should be.

If I use just about any other numbers they work, but of course I had my mind set on 32 and 8.

I am wondering if it’s the method in which I am looping through creating the boxes or if there’s some underlying math going on that I don’t understand.

Here’s a jsFiddle set up with the code in question:

http://jsfiddle.net/dondon/zMnuK/

If you modify the ‘spacing’ in the JS section to say 7 or 9, the gaps vanish. What is it about 8 (or 4) that cause the gaps to appear?

Any input is appreciated! 🙂

Answer 1

It has to do with multiple boxes having the same id and the css being set on both of them such that they end up in the exact same position. For example, the third box created has x position (x is vertical with your looping order) 88px, and y position 8px. Then much later in the third row a box with y = 88px, and x = 8px. is reached, so 'box' + x + y; is identical for both these boxes. You can’t have more than one element with the same id, so anything can happen after that.

The simple solution is to change:

var boxid = "box"+x+y;

To:

var boxid = "box"+x+'_'+y;

Updated JSFiddle