Honzis Novák Honzis Novák - 1 year ago 195
CSS Question

Internet Explorer CSS width: calc()


I've got a problem with IE, when i've got 3 divs with background-image in 1 row and everyone has

width: calc(100% / 3);

If you resize a window, third image blinks.

When you resize the window to big resolution like
has at least
, then third image dissapears totally.

I've also implemented browser prefixes - you can see in Fiddle.

Has anybody please any idea, how I could fix that? Thank you so much!

Btw: Other browsers are allright.

Answer Source

A little and easy workaround for this is to reduce the width by 1px:

  height: 220px;
  width: 100%;
  overflow: hidden;
.banner-mini .box{
  float: left;
  width: 33%; /** older browsers **/ 
  width: -webkit-calc((100% / 3) - 1px); /** Safari 6, Chrome 19-25 **/
  width: -moz-calc((100% / 3) - 1px); /** FF 4-15  **/
  width:  calc((100% / 3) - 1px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
  height: 100%;
.banner-mini .fst{
  background: url(http://s33.postimg.org/q43iabwtr/banner_1.jpg)  no-repeat center center; 
  background-size: 100%;
.banner-mini .snd{
  background: url(http://s33.postimg.org/tozdtk1db/banner_2.jpg)  no-repeat center center; 
  background-size: 100%;
.banner-mini .trd{
  background: url(http://s33.postimg.org/lkr9otey7/banner_3.jpg)  no-repeat center center; 
  background-size: 100%;
<div class="banner-mini">
  <div class="box fst"></div>
  <div class="box snd"></div>
  <div class="box trd"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download