I'm facing an issue with a container div called .audiojs
that has a width of 100%. Inside this container, there are multiple elements with fixed widths and one element with a dynamic width (.scrubber
with a width of 30%). The problem arises when I try different percentages for the .scrubber
but can't seem to make it occupy the remaining width of the container without disrupting the layout on resizing. Is there a solution to ensure that the .scrubber
(loading/progress bar) takes up the rest of the width within .audiojs
without causing layout issues or affecting other elements with fixed widths?
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;
}