div容器內div的自動寬度

Question

我有一個設計問題。 我需要爲視頻播放器創建一個進度條。 我有一個div容器（編號videoManager）與所有關於播放，停止，進度條，音量，其他按鈕，所有的div旁邊（浮動左）。

我想進度條的div（編號playerSlider）根據剩餘的空間調整大小。我寫下了這段代碼，但是如果使用「width：100％;」對於這個div，它沒有得到剩餘的空間，但是100％的容器。 意見？

HTML：

<div id="videoManager"> 
    <div id="playpauseCommand">Play</div> 
    <div id="stopCommand">Stop</div> 
    <div id="playerSlider"> 
    <div id="objSlider"></div> 
    </div> 
    <div id="timeElement">10:12:12</div> 
    <div id="volumeSlider"></div> 
    <div id="displayCommand">Command</div> 
</div> 

CSS：

div#videoManager{ 
    margin-top: 30px; 
    width: 980px; 
    height: 44px; 
    background: transparent url('bg.jpg') center center repeat-x; 
    position: relative; 
    color: #fff; 
} 
    div#playpauseCommand, div#stopCommand{ 
     width: 44px; 
     height: 44px; 
     float: left; 
     border-right: 2px solid #555; 
    } 
    div#playerSlider{ 
     float:left; 
     height: 44px; 
     width: 100%; 
     padding: 15px 10px 0px 10px; 
    } 
     div#objectSlider{ 
     float: left; 
     clear: left; 
     width: 100%; 
     } 
    div#timeElement{ 
     float: left; 
     height: 44px; 
     width: 80px; 
     border-right: 2px solid #555; 
    } 
    div#volumeSlider{ 
     float: left; 
     height: 44px; 
     width: 180px; 
     border-right: 2px solid #555; 
    } 
    div#displayCommand{ 
     float: left; 
     height: 44px; 
     width: 70px; 
     border-right: 2px solid #555; 
    } 

，這是一個鏈接to my site。

Answer 1

試試這個CSS代碼，不知道如果這正是你想要的東西，但：

div#videoManager{ 
margin-top: 30px; 
width: 980px; 
height: 44px; 
background: transparent url('bg.jpg') center center repeat-x; 
position: relative; 
color: #fff; 
} 
div#playpauseCommand, div#stopCommand{ 
    width: 44px; 
    height: 44px; 
    float: left; 
    border-right: 2px solid #555; 
} 
div#playerSlider{ 
    float:left; 
    height: 44px; 
    width: 53%; 
    padding: 15px 10px 0px 10px; 
position:absolute; 
left:178px; 
} 
div#objectSlider{ 
    float: left; 
    clear: left; 
    width: 100%; 
    } 
div#timeElement{ 
    float: left; 
    height: 44px; 
    width: 80px; 
    border-right: 2px solid #555; 
} 
div#volumeSlider{ 
    float: right; 
    height: 44px; 
    width: 180px; 
    border-right: 2px solid #555; 
} 
div#displayCommand{ 
    float: right; 
    height: 34px; 
    width: 70px; 
top:10px; 
    border-right: 2px solid #555; 
position:relative; 
}