Question

As you can see there is a gap between the first (yellow outlined) div and the second (red-outlined) div. I’ve tried several things but nothing works so far.

#borderLeft{

    background: url(../01_templates/borderLeft.png) left no-repeat;
    display:inline;
    position relative;
    left:50px;
    float:left;
    width:133px;
    border:1px dotted yellow;

}

#border{

    background: url(../01_templates/borderCenter.png) left repeat-x;
    display:inline;
    position:inherit;
    width:100%;
    border:1px dotted red;
    margin-right:116px;

}

#borderRight{

    background: url(../01_templates/borderRight.png) left no-repeat;
    display:inline;
    float:right;
    position:absolute;
    right:0px;
    border:1px dotted yellow;
    width:133px;

}


<div id="borderLeft"></div>
<div id="border"></div>
<div id="borderRight"></div>

Answer 1

The OP’s original problem could be fixed by setting font-size: 0 on the divs.

The following is a modern approach based on flexbox.

.parent {
  display: flex;
}

.parent div {
  border: 1px solid black;
  width: 25%;
}

.parent .double {
  border-color: red;
  flex-grow: 2;
}

<div class="parent">
  <div></div>
  <div class="double"></div>
  <div></div>
</div>