css - 2 つの動的 div 間のスペース

Question

そのため、2 つの動的 div の間に何らかのスペースを確保しようとしています。スペースは水平である必要があります。ページ幅に合わせて左右の div を変更したいのですが、その間にまだスペースがあります。

スペースは透明である必要があります。

これは私が今持っているものです:

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

スタイルシート:

#container {
height: 85px;
}

#left {
height: 100%;
width: 100%;
float: left;
background: #0f0;
}

#right {
height: 100%;
width: 100%;
float: right;
background: #0f0;
}

#spacer {
height: 100%;
width: 120px;
float: left;
background: #f00;
}

しかし、これは私が得るすべてです: JsFiddle

どうすればこれを修正できますか？

Answer 1

これを試して：

#left,#right{
    width:calc(50% - 60px); //50% of width, minus 60px because spacer is of 120px
}

デモ。

Answer 2

左右を 50% 幅に変更し、負のマージンを適用してみませんか: http://jsfiddle.net/R8Ss4/7/

#container {
    height: 85px;
}
#left {
   height: 100%;
   width: 50%;
   float: left;
   margin-right: -60px;
   background: #0f0;
}    
#right {
    height: 100%;
    width: 50%;
    margin-left: -60px;
    float: right;
    background: #0f0;
}
#spacer {
   height: 100%;
   width: 120px;
   float: left;
   background: #f00;
}