3

When you resize the window width in Safari, the last div box on the right side is not 100% aligned, instead 1-3px space between the last div box and the window border.

Take a look with Safari and try to resize the width: http://jsfiddle.net/LPXfe/2/

Any idea how to fix the space?

.html,
body {
  width: 100%;
  height: 100%;
}

.outside {
  width: 100%;
  min-height: 500px;
  position: relative;
  display: inline-block;
}

.inside {
  width: 25%;
  height: 299px;
  position: relative;
  float: left;
  background-color: #dcdcdc;
}
<div class="outside">
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
</div>
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
alexandrrr
  • 779
  • 1
  • 6
  • 7

2 Answers2

0

This apparently is an issue in the safari browser (mostly in iOS).

I reworked your CSS to fix the situation. It's not the most ideal, but when the browser doesn't render things properly we have to adjust.

I removed the position-relatives on the .outside and .inside box and I added the overflow-x:hidden to the html, body tags. This prevents the horizontal scrolling. I then made the width of the .outside 101%. This pushes out the box to hide the offending pixels. 

html, body {
    margin:0;
    width:100%;
    overflow-x:hidden;
}

.outside {
    width:100.5%;
    height: 500px;
    overflow:hidden;
    background: #009900;
}
.inside {
    width:25%;
    height: 299px;
    float: left;
    background-color: #990000;
}

Here is a jsFiddle with the updated styles. I made the backgrounds more contrasting in color for the sample code.

ZombieCode
  • 1,646
  • 2
  • 24
  • 46
0

It is possible that this is a side-effect of iOS's tendency to rescale small fonts.

I had problems with labels using float: right; which was ultimately resolved by this method.

Sean Wallis
  • 51
  • 1
  • 1