html - 定位，使某些元素占据父div中剩余的空间

我有以下问题我有一个容器div.audiojs宽度为100%。里面有几个固定宽度的元素，还有一个动态宽度的元素（.scrubber宽度为30%）问题是，无论我尝试的.scrubber百分比是多少，我都无法让它以一种在调整大小时不会弄乱布局的方式占据容器宽度的其余部分。有办法让这一切顺利吗？如何强制.scrubber（加载/进度条）占用.audiojs宽度的其余部分？没有弄乱布局和其他固定宽度的元素。
JsFiddle:http://jsfiddle.net/w8GEK/3/
HTML格式

<div class="audiojs">
    <div class="play-pause">
    </div>

    <div class="volume">
    </div>

    <div class="time">
         <em class="played">00:00</em>
    </div>

    <div class="scrubber">
    </div>

    <div class="time-2">
         <em class="duration">00:00</em>
    </div>

</div>

CSS

.audiojs {
    width: 100%;
    height: 40px;
    background: #404040;
    overflow: hidden;
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 10px;
}

.audiojs .play-pause, .audiojs .volume {
    width: 45px;
    height: 40px;
    margin: 0px;
    float: left;
    overflow: hidden;
    background: #262626;
    border: 1px solid #232323;
    border-bottom: 2px solid #232323;
    border-radius: 2px;
}

.audiojs .volume {
    margin-left: 12px;
}

.audiojs .scrubber {
    position: relative;
    float: left;
    width: 30%;
    background: #232323;
    height: 10px;
    margin: 15px 12px;
    overflow: hidden;
}

.audiojs .time, time-2 {
    float: left;
    height: 40px;
    line-height: 40px;
    color: #ddd;
}

.audiojs .time {
    margin-left: 12px;
}

.audiojs .time em, .audiojs .time-2 em {
    color: #f9f9f9;
    font-style: normal;
}

最佳答案

我要做的就是这样：http://jsfiddle.net/GPvLB/1/
我将scrubber定位为绝对位置，并给它一个left和一个right位置。这些值将是洗涤器旁边元素的宽度（和边距/填充）之和。这样，洗涤器的宽度将变为动态的，并将适应包装器的宽度。
像这样的：

.audiojs .scrubber {
    position: absolute;
    background: #232323;
    height: 10px;
    left: 160px;
    right: 60px;
    top: 15px;
}

请注意，我：
-添加相对于包装器的位置（用作绝对位置的参考）
-把你的时间-2移到右边
这在所有浏览器中都可以正常工作，并且不需要Javascript。。。