Darko Darko - 1 month ago 3
CSS Question

Srange border on "cover" backgrounds inside elements with display table-cell css property - chrome

I'm seeing 1px border/gap between columns on some resolutions in chrome:

enter image description here

there's no gap in Firefox btw.


<div class="row equalize">
<div class="col-sm-6 col-sm-push-6 wt-bg-two"></div><!--div with bg image -->
<div class="col-sm-6 col-sm-pull-6 c-dark-blue">
<div class="inner text-right">
<h3>Some Title</h3>
<p>some paragraph text</p>


.row.equalize {
display: table;
width: 100%;
margin: 0;
.equalize [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
height: 400px;

here's the fiddle

Just open it in Chrome/Win - resize the result frame until boxes are side by side - the best example of what I'm trying to show can be viewed in the 2nd row - on some frame widths 1px gap appears.

answers including "flex" solution would not be accepted, thx


It looks like this is caused by an odd number of pixels that Bootstrap is trying to split 50/50 via col-sm-6 class. See What happens to the remaining 1px when a div with an odd width is split 50%/50%? for browser-specific details.