The images are 153px wide. When space between images becomes too little, The last image would break into the next row and the re-adjust so that the new last image is at the right edge of the container, and the first image is at the edge of the left one. Exactly like this http://jsfiddle.net/danield770/Vfffg/16/
I finally found a solution, implemented it and it was working perfectly. Then i tested it on multiple browsers and thats when it all went to shit. The browser compatibility for calc() isn’t very good. It’s times like these were i think the web is the worst of all software developing fields. Finally a working solution that can’t be used because stupid fucking browsers that should have died years ago are still being used by millions today. Fuck this shit.
Its normally used for organizing items of differing sizes into a grid, but theres no reason you couldn’t use it in your situation, if everything else has failed. Browser support is very good (ie8+ , all modern browsers)