Why does this table-cell overlap the table-cell adjacent to it? - css

Question

JSFiddle here.
This is an SSCCE demonstrating a div with display:table with three child divs having a display:table-cell. The problem is that the .blog-post-slide overlaps the .previous-slide-arrow, rather than being adjacent to it.
The question is why, and how should I solve this problem.
.post-main-area {
display: table;
width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
border: 5px solid green;
/*check*/
width: 5%;
display: table-cell;
position: relative;
vertical-align: middle;
left: 20px;
}
.post-main-area .next-slide-arrow {
left: auto;
right: 20px;
}
.post-slide {
border: 5px solid wheat;
/*check*/
width: 90%;
position: relative;
}
<div class="post-main-area">
<a class="previous-slide-arrow" href="#"><</a>
<div class="post-slide">.
<!--<div class="left-part">.</div>
<div class="right-part">.</div>-->
</div>
<a class="next-slide-arrow" href="#">></a>
</div>

Answer 1

Because you shift the first cell 20px to the right:
position: relative;
left: 20px;
Then, as explained in Relative positioning, it overlaps the following cell.
Once a box has been laid out according to the normal flow or floated,
it may be shifted relative to this position. This is called relative
positioning. Offsetting a box (B1) in this way has no effect on the
box (B2) that follows: B2 is given a position as if B1 were not offset
and B2 is not re-positioned after B1's offset is applied. This implies
that relative positioning may cause boxes to overlap.
Instead, I would add some margin to the table:
width: calc(100% - 40px);
margin: 0 20px;
.post-main-area {
display: table;
width: calc(100% - 40px);
margin: 0 20px;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
border: 5px solid green;
width: 5%;
display: table-cell;
vertical-align: middle;
}
.post-slide {
border: 5px solid wheat;
}
<div class="post-main-area">
<a class="previous-slide-arrow" href="#"><</a>
<div class="post-slide">.</div>
<a class="next-slide-arrow" href="#">></a>
</div>

Answer 2

I wouldn't manually move the buttons and stuff, try adding display:table-cell; to .post-slide {} and getting rid of all of the left: and right: attributes like so;
.post-main-area {
display: table;
width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
border: 5px solid green;
/*check*/
width: 5%;
display: table-cell;
position: relative;
vertical-align: middle;
}
.post-slide {
border: 5px solid wheat;
display: table-cell;
/*check*/
width: 90%;
position: relative;
}
This allows the computer to position everything like a table, and due to the widths and the order you write the elements in the html document, it should work.