Evans Evans - 1 year ago 137
CSS Question

CSS calc percentage divided by x then minus 1 px?

Im use CSS calc to make 7 items the correct width to sit side by side:

width: calc(100% / 7);

This works fine in most browsers but sometimes IE rounds up, making the last item clear to the next line. How can I subtract 1px from the width?

width: calc((100% / 7) -1px);

Answer Source

For better support than Flexbox, use CSS Tables as a solution and avoid the whole calc requirement in the first place.

Support is good as far back as IE8

.wrapper {
  width: 100%;
  background-color: #bada55;
  display: table;
  table-layout: fixed;
.wrapper div {
  display: table-cell;
  height: 70px;
  background-color: rebeccapurple;
  border: 1px solid orange;
<div class="wrapper">

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