How to keep elements aligned regardless of browser zoom ratio?

Question

I have a page which "draws" grids as seen below:

It does this by using absolutely positioned divs. Each grid is 237x237 pixels wide so the first grid would be placed at top:0; left:0;, the second grid would be placed at top:0; left:237px;, the third grid would be placed at top:0; left:474px; and so on.

However, when the user zooms in or out (using the browser keys Ctrl+ / Ctrl-), the boxes are not aligned properly. This is evident when the background color of the page seeps through:

What's the best way to keep the boxes "side-by-side" regardless of the browser's zoom ratio?

---

P.S. The boxes had to be positioned absolutely because they need to be dynamically moved.

Answer 1

different browsers do round "% of a pixel" in a different way - see Evenly distributed height of child elements with CSS

as it has been suggested in the comments, using a background image would greatly help - it should composed by 4 "squares" or grids as you call them, and repeated horizontally and vertically.

in that way, you could still keep the divs with position: absolute and leave their background as transparent - however, if the tile background needs to be shown while you animate it, you might have to set it as a background color when the animation starts and then set it back to transparent once the animation is concluded - but for this to work I'm supposing that you are moving a grey square in place of another grey square and the same about white ones.

EDIT following your comment:

This is gonna be very tricky to achieve, different browsers offer different levels of zoom and it's very hard to figure out a size for your divs that would scale down nicely (without any "half pixels") in all cases. However, as long as functionality is not affected, a little discrepancy in the look and feel when things are zoomed in/out is normally very acceptable, and I hope that this is the case!

as a last idea, you could try using % positioning instead of pixels - this possibly will adapt better when zooming, but I cannot guarantee as I haven't tested it - but it might be worth giving it a try! best of luck with this!