The issue I’m having can be found here:
http://jsfiddle.net/boblauer/5uVrK/
If you look at it in Chrome, you’ll notice that when you scroll to the right, it stops immediately at the right edge of the last green box. However, in FF and IE (haven’t tried others), it will correctly scroll a bit past the last green box.
Since .lane-container has a width of 2000px and the boxes should take up a width of 1700px, there should be 300px extra to the right of the last box, but in Chrome there is not.
Any ideas on why Chrome behaves differently than the others, and how I can work around it?
Setting the display to inline-block instead of float: left fixed the issue for me. Floating block level elements takes them out of the dom flow. That doesn’t really explain why this doesn’t work, but this is a workaround. I always prefer inline-block over floating left.
Edit
After some more jsfiddling, it seems chrome isn’t showing the container div’s full width because it’s empty. As soon as you add a border around lane-container it works as expected, although, since you’re floating the inner divs left, they aren’t in the dom float and lane-container appears to have a height of 0.