Evans Evans - 3 months ago 5
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

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">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Comments