I have a simple scenario where I would like two boxes to display next to each other and to take the full width of the page, with 0.75em margin between them. Here is my markup:

```
<div class="box"></div>
<div class="box"></div>

```

and the CSS:

```
.box {
  float: left;
  width: calc(50% - 0.375em); /* 0.375 * (2 boxes) = 0.75 */
  margin-right: 0.75em;
}

.box:last-of-type {
  margin-right: 0;
}

```

This works correctly on Chrome, but when I try to load it in IE11, the second box wraps to the next line. I have set the font-size on the html element to 16px. Interestingly, if I replace 0.375em with 6px (16px \* 0.375 = 6px), the boxes show up correctly on one line in IE11. Any thoughts anyone?

Here is a JSFiddle where you can see this not working in IE: <http://jsfiddle.net/Lcuu8/3/>