html5 - automatic width of a div inside a div container -

html5 - automatic width of a div inside a div container -

i have design question. need create progress bar video player. have div container (id videomanager) div play, stop, progress bar, volume, other buttons, 1 beside other (floating left).

i div of progress bar (id playerslider) resizes depending on remained space. wrote downwards code, if utilize "width: 100%;" div, doesn't remained space, 100% of 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 link to site.

try css code, not sure if 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; }

html5 css3