Center a div between two divs that take full width

Question

I'm trying to sit a fixed width div between two variable width divs.

What I have right now is this:

And I am trying to achieve this:

I've tried using display:table as well and was close, but could not get the 'left' and 'right' text to stay at the sides (I put the middle cell to margin: auto, but that means it kicks out space from the left and right div).

<div id="left">left</div>
<div id="right">right</div>
<div id="mid">mid</div>

#left
{
    float: left;
    border: solid 1px red;
    text-align: right;
}

#mid
{
    margin-left: auto;
    margin-right: auto;
    border: solid 1px red;
    text-align: center;
    width: 60px;
}

#right
{
    float: right;
    border: solid 1px red;
    text-align: left;
}

http://jsfiddle.net/0vraqfLf/

Answer 1

As you want the mid column to have the size you defined, you would need the box-sizing property.

HTML

<div id="content">
    <div id="left">left</div>
    <div id="mid">mid</div>
    <div id="right">right</div>
</div>

CSS

#content {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}

#left,
#mid,
#right {
    border: solid 1px red;
    display: table-cell;
    padding: 2px 5px;
    box-sizing: border-box;
}

#left {
    text-align: right;
}

#mid {
    text-align: center;
    width: 60px;
}

#right {
    text-align: left;
}

Answer 2

I would use table and table-cell too, with some rules as follows.

JSFiddle Demo

.table {
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.table > div {
    display: table-cell;
    border: solid 1px red;
}
.table > div:nth-child(1) {
    text-align: right;
}
.table > div:nth-child(2) {
    text-align: center;
    width: 60px;
}
.table > div:nth-child(3) {
    text-align: left;
}

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

Answer 3

http://jsfiddle.net/4s2qcarg/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.wrapper{
    width: 100%;
}
.wrapper div{
    border: solid 1px red;
    display: inline-block;
    vertical-align: top;
        
}
#left,
#right{
    width: calc(50% - 30px);
}
#mid{        
    text-align: center;
    width: 60px;
}
#right{
    text-align: right;
}

<div class="wrapper">
<div id="left">
    left
</div><!--
--><div id="mid">
    mid
</div><!--
--><div id="right">
    right
</div>
</div>