I am trying to implement a variation to how images are displayed for those viewing this website who prefer a tiled viewed over my image existing slider.
The gallery is labeled as follows:
<!-- TILE GALLERY -->
<div id=tileGallery >
<?php for ( $x=0; $x<40; $x++)
<div class="col-lg-3 col-md-4 col-xs-6">
<img id=img_<?php echo$x;?> data-zoom-image="picsLarge/home-<?php echo $x+1;?>.jpg" class=imgGal src="pics/home-<?php echo $x+1;?>.jpg">
<!-- end tile gallery -->
When using percentages in CSS like you are, many times the widths and heights are outputted in decimals, which are rounded differently by individual browsers. I've encountered problems like this many times where that rounding is inconstant and results in some containers being 1px larger than the neighbor containers which will result in the 'shifted' images.
Lets take grid:
A B C
D E F
G H I
As long as all the elements share the exact same height they will be a perfect grid. however, if A get rounded to 1px taller than the other elements your grid will turn into:
A B C
F G H
This is because A is 1px taller than B and C, which makes it encroach 1px into the next "row" that the floats are creating. And now D and E are acting like A is to the left of them and they are starting 1 position further to the right.
This can happen in many different ways that result's in different images getting "pushed" in different areas of the grid.