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);
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments