width:auto in firefox is not working as intended

[sdm]

So, I have an image wrapped in a div (\[code\].indexWrap\[/code\]): \[code\]<div id = "slider"> <div class="indexWrap"> <img class="indexImage" src=""> </div></div>\[/code\]There are 8 of these created on page load via php within a div called \[code\]#slider\[/code\]. I am using smooth Div Scroll to display these images on the home page. Everything looks fine in Chrome, and looks ok in IE 8 and 9. Problem is in firefox. the auto width of \[code\]div.indexWrap\[/code\] for each image is not setting properly. The div seems to stretch an extra 200-300px to the right. Here is the css:\[code\]#slider{ position: relative; top:50px; width:100%; height:275px;}div.scrollWrapper{ position: relative; overflow: hidden; width: 100%; height: 100%;}div.scrollableArea{ position: relative; width: auto; height: 100%;}.indexWrap{ float:left; position:relative; width:auto; height:100%; padding-right:50px; padding-left:50px;}img.indexImage{ float:left; position:relative; width:auto; height:100%;} \[/code\]Here is a link to the live version with the issue: jasone.co Edit:And on top of this on page load each \[code\]div.indexWrap\[/code\] is not properly padded, but as the scrolling begins the next retrieved elements are padded correctly kind of lame. May be the cause to all this.