Chrome and Opera creating small padding when using display:table

Question

I've noticed that Chrome (34.0.1847.131 m) and Opera (21.0.1432.67) are creating an small gap between two divs when using the property display:table;. (and not when using display:block, for example)

Here's a fiddle reproducing it. (adjust the width of the panel, it doesn't take place with every width)

To reproduce it:

HTML

<div class="left"></div>
<div class="right"></div>

CSS

.left {
    left: 0px;
}
.right {
    right:0px;
}
.left, .right {
    width: 50%;
    position: absolute;
    height: 350px;
    background:#000;

    display:table;
    border-spacing:0;
    border:0;
    margin:0;
    padding:0;
}

How can I get rid of this gap? Is this some kind of bug?

Answer 1

add 1 px to the placement of the right div:

.right {
    right:1px;
}

http://jsfiddle.net/3z24S/12/

Answer 2

Changing table to table-cell seemed to do the trick: http://jsfiddle.net/3z24S/7/

Answer 3

I have two potential solutions:

Option 1:

Use css calc(); to set the width of the two divs, like so:

Working Example 1

.left, .right {
    width: calc(50% + 0.1px); /* Important bit */
    position: absolute;
    height: 350px;
    background:#000;
    display:table;
    border-spacing:0;
    border:0;
    margin:0;
    padding:0;
}

Option 2:

Use JavaScript to set the width of the two divs, like so:

Working Example 2

wid = function () {
    $('.left, .right').width(Math.ceil($(window).width() / 2)); //Math.ceil() will round the value up
};
$(document).ready(wid);
$(window).resize(wid);

If you can get away with using calc() its probably the better option, using JavaScript seems expensive for something like this.

Answer 4

If it is a matter of vertical-align and known height, you can do without display:table/table-cell; DEMO or you could do without absolute position.

You may use inline-block, vertical-align and pseudo élément. HTML :

<div class="left">
  <div class='content'>
    <p>content</p>
  </div>
</div>
<div class="right">
  <div class='content'>
    <p>content</p>
    <p>content</p>
  </div>
</div>

the div.content will be inline-block or is display:table-cell in your problem.

CSS

.left {
    left: 0px;
}
.right {
    right:0px;
}
.left, .right {
    width: 50%;
    position: absolute;
    height: 350px;
    background:#000;
    color:white;
    border-spacing:0;
    border:0;
    margin:0;
    padding:0;
}
.left:before,
.right:before ,
.content {
  display:inline-block;
  vertical-align:middle;
  max-width:95%;
}
.left:before,
.right:before {
  content:'';
  height:100%;
  width:0;
}

Even answering here to your question , i still do not understand why position:absolute; and still not sure if elements are suppose to have an known height. It looks more like you are not using the proper or best method to your needs.

The pixel bug is, in my opinion, already answered in comments and obviously a different way for chrome to handle this display value.