I am curious if there is a simple CSS fix for the problem I am facing. It looks like Firefox / OSX includes the scrollbar width when determining the width of the container and misaligns the content ( http://d.pr/i/fACK ). Chrome / OSX works as I hope, and ignores the width of the scroller and aligns the content correctly ( http://d.pr/i/q02g ). I tried a few things, such as box size, etc., with no luck.
I created a JS Fiddle where you can view the problem in both Chrome / Safari and Firefox.
http://jsfiddle.net/jHVMU/2/
#container{ width:600px; } #content{ max-height: 300px; overflow: auto; padding: 0; } #content ul{ list-style:none; margin:0; padding: 30px 50px; } #content ul li{ width:30%; margin:0 5% 15px 0; height:150px; background:#000; float:left; } #content ul li:nth-child(3n) { margin-right: 0; }
source share