title: How to keep elements aligned regardless of browser zoom ratio?
body: <p>I have a page which "draws" grids as seen below:</p>
  
  <p><img src="https://i.stack.imgur.com/nT9H0.png" alt="enter image description here"></p>
  
  <p>It does this by using absolutely positioned divs. Each grid is 237x237 pixels wide so the first grid would be placed at <strong>top:0; left:0;</strong>, the second grid would be placed at <strong>top:0; left:237px;</strong>, the third grid would be placed at <strong>top:0; left:474px;</strong> and so on.</p>
  
  <p>However, when the user zooms in or out (using the browser keys <kbd>Ctrl</kbd><kbd>+</kbd> / <kbd>Ctrl</kbd><kbd>-</kbd>), the boxes are not aligned properly. This is evident when the background color of the page seeps through:</p>
  
  <p><img src="https://i.stack.imgur.com/f1s1x.png" alt="enter image description here"></p>
  
  <p>What's the best way to keep the boxes "side-by-side" regardless of the browser's zoom ratio?</p>
  
  <hr>
  
  <p>P.S. The boxes had to be positioned absolutely because they need to be dynamically moved.</p>