CODEWITHSUNDEEP
htmlcssimagefirefox
Joe
Joe

Reputation: 29

Div does't scale to child image's scaled width (Firefox issue)

I have some images in a horizontally scrolling Div like so:

HTML

<div id="sg-container" >
    <div id="sg-scroll">
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic" ></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>
        <div class="sg-pic_wrap"><img src="#" class="sg-pic"></div>                
   </div>
</div>

CSS

#sg-container{
   margin:0px;
   width:100%;
   left:0;
   top:0;
   bottom:50px;
   position:fixed;
   overflow-x:auto;
   overflow-y:hidden;
}

#sg-scroll{
   height:100%;
   width:100%; 
   overflow:auto;
   white-space:nowrap;
   font-size:0;
}

.sg-pic_wrap{
   height:98%;
   width:auto;
   white-space:nowrap;
   display:inline-block;
}

.sg-pic{
   height:100%;
   width:auto;
}

A working example: fiddle

Can anyone using Firefox tell me why the image wrappers do not scale their widths to match the images. It currently works fine in Safari and Chrome (not tested in IE).

In Firefox, if the image for example was originally 500px wide but is scaled up because of the 100% height property, the image wrapper width stays at 500px.

Another example, if an image is originally 2500px wide but is scaled down to fit in, the width of the image wrapper will stay 2500px wide resulting in a big space before the next image.

How can I make it behave the same in Firefox as it does in Chrome and Safari?

Upvotes: 1

Views: 1883

Answers (1)

ookie
ookie

Reputation: 138

.sg-pic_wrap{
   height:98%;
   width:auto;
   white-space:nowrap;
   display:inline;
}

Change display to inline.

Upvotes: 1

Related Questions