html - フロートされた左右の div 間のスペースの 100% の幅

Question

左側と右側に div があり、どちらも固定幅です。中間のdivウィッチも固定幅です。画面の解像度に関係なく、中央の div を左右の div の中央に配置したいので、左から中央の div までのスペースと、中央から右の div までのスペースは常に同じにする必要があります。どうやってやるの？

これは私がこれまでに得たものです:

HTML:

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

CSS:

div{
    border: 1px solid black;
    height: 200px;
}
#container{
    width: 100%;
}
#left{
    width: 50px;
    float: left;
}
#content{
    width: 150px;
    float: left;
    margin: 0 auto;
}
#right{
    width: 100px;
    float: right;
}

http://jsfiddle.net/Y5ZCT/