0

I have come across a problem when optimizing a simple site for mobile/small viewport viewing. I have 5 images, displayed immediately next to each other and have set the width to 20% with no margin, padding or anything else. However, when the viewport is reduced to the point where the images should be scaled, the last always wraps to a new line. I have created a simple test and seen this behaviour in IE and Chrome:

<html> 
<head> 
<title>Image test</title>
</head>
<body>
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
</body>
</html>

As far as I understand, the images should never wrap since the total width of the images will never total more than 100% of the parent element.

Is this a known issue or am I missing something fundamental.

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
John H
  • 3
  • 1
  • possible duplicate of [Where do the lost pixels go in a percent CSS layout?](http://stackoverflow.com/questions/5581973/where-do-the-lost-pixels-go-in-a-percent-css-layout) – Marcel Korpel Jun 10 '11 at 14:22

2 Answers2

1

As we don't know what is the width of your container and of your images...

It may be related to the new image width calculated by the browser when scaling the image, specifically it could get "ceiled" thus exceeding the total width of the container.

e.g. img width 184px * 5 = 920px container width

after scaling down: container width: 920px * 20% = 184px; image width of 184px * 20% = 36.8 -> 37px

37 * 5 images = 185px exceeds the container width

try checking what is the width of your resized images, multiply it by 5 and see if it exceeds the container width.

Luca
  • 9,259
  • 5
  • 46
  • 59
  • We don't need to know the width of the parent container - the assumption is that the parent=100%. However, the theory is sound, in that the calculation may round to something higher than 100%. I have not looked at the calculated values, but to work around the issue, I have set the images to 24%. Not ideal but hardly noticeable unless, like me, you are looking for the issue... – John H Jun 15 '11 at 09:46
0

My guess is you need a...

body {
    padding:0;
    margin:0;
}
Richard JP Le Guen
  • 28,364
  • 7
  • 89
  • 119
  • Thanks for the reply. I have tried that to no avail. For testing purposes I have also tried * { padding: 0!important; margin: 0!important; } I have also tried changing the DTD and the issue always remains – John H Jun 10 '11 at 14:32