Search code examples
htmlcssinternet-explorer-11

1px gap between divs in IE11

I am displaying a div with 2 divs in it. One div has a colored background. It works fine in Firefox and Chrome, but there appears a gap in Internet Explorer 11.

I don't see the gap always, it changes based on how far i am zoomed in. When i see it, and i zoom further, it can dissappear again.

Here is my code:

.container {
  border: 1px solid;
  width: 500px;
  padding: 0px;
  position: relative;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
}
.left {
  background: #000000;
  width: 50%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
}
.right {
  margin-left:50%;
  padding:10px;
  
}
<div class="container">
  <div class="left"></div>
  <div class="right">hello</div>
</div>

And here is the gap that sometimes appears in IE11: Screenshot of problem

Solution

  • try giving box-sizing property to your container 

    .container {
 box-sizing:border-box;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -o-box-sizing:border-box;
}

    It might be getting box-sizing:content-box inherited from somewhere on in your css.