Question

So, I have an image wrapped in a div (.indexWrap):

<div id = "slider">      
<div class="indexWrap">                 
        <img class="indexImage" src="">                             
       </div>
</div>

There are 8 of these created on page load via php within a div called #slider. 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 div.indexWrap for each image is not setting properly. The div seems to stretch an extra 200-300px to the right. Here is the css:

#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%;
}  

Here is a link to the live version with the issue: jasone.co

Edit:
And on top of this on page load each div.indexWrap 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.

Answer 1

I fixed the issue by getting rid of the wrapper around the image. Not how a wanted it, but it works fine.