automatic width of a div inside a div container - html

Question

I have a design question.
I need to create a progress bar for a video player.
I have a div container (id videoManager) with all the div about the PLAY, the STOP, the progress bar, the VOLUME, other buttons, all one beside the other (floating left).
i would like the div of the progress bar (id playerSlider) resizes depending on the remained space. i wrote down this code, but if use "width: 100%;" for this div, it doesn't get the remained space, but the 100% of the container.
suggestions?
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;
}
and this is a link to my site.

Answer 1

try this css code, not sure if this is exactly what you want though:
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;
}