Question

I have an audio player that i built with jquery. The markup and css is relatively simple but I cannot get the progress bar to change width with the width of the whole container.

It is set as a percentage but does not behave as a child of the container div. I am guessing it is something to do with the position being absolute but if i change that the whole thing goes wrong.

Here is the markup

<div class="container gradient">

    <div style="width:100px; overflow:hidden; display:inline-block;"><a href="" target="_blank"><img src="" class="artwork" height="100%"></a></div>
    <div class="name">

<p1><a href="" target="_blank"></a><br>
    <b></b></p1>

    </div>
    <div class="logo" style="font-size:12px; text-align:right; font-weight:bold;">


            <br><a href="" target="_blank""></a>
    <br>


    </div>
    <div class="player gradient">



        <a class="controls gradient" id="play" href="" title=""></a>



            <input type="range" id="seek" value="0" max=""/>




    </div><!-- / player -->

</div><!-- / Container-->

And the css

.gradient {
border: 1px solid #C4C4C4;

background: #F2F2F2; 

}

.container {

position: absolute;
width: 100%;
height: 122px;



top: 0%;
left: 0%;

padding: 10px;



.artwork {height:100px; overflow:hidden; margin-left:auto; margin-right:auto;}

.containerLarge {
height: 427px;
}



.name {left:120px; position:absolute; top:7px}
.player {

box-sizing: border-box;
position:absolute;
width:91%;
bottom: 10px;

left:120px;



border-radius: 3px;
padding: 5px;
}

.controls {
border-radius:1em;
background-color:#0485bf;
display: block;
width: 34px;
height: 34px;
background-image: url(../player/src/images/sprite.png);
background-repeat: no-repeat;
float: left;
margin-right: 5px;


}
.controls:hover {background-color:#005b85}

#play {
background-position: 6px 5px;
}

#pause {
background-position: -32px 5px;
}


input[type="range"] {
width: 250px;
margin-top: -5px;
}

#close {
float: right;
background-position: -146px 5px;
display: none;
}

.volume {
position: absolute;
height: 100px;
width: 34px;
border: 1px solid black;
background-color: #242323;
top: -97px;
display: none;
}
input{
display:none\9!important;
}
input[type="range"] {

border: 1px solid #C4C4C4;
position: absolute;
top: 18px;
display: block;
width: 95%;
height: 15px;

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #DBDBDB;
left: 50px;

}

input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border:1px solid #C4C4C4;

-webkit-border-radius: 10px;
border-radius: 10px;
background: #0485bf; 

}

input::-webkit-slider-thumb: hover {opacity : 0.3;filter: alpha(opacity=30)}

.logo {float:right; }

.embed {width:100%; background-color:black }

The main elements in question are .container, .controls, .player and the input type range.

Answer 1

Hard to see what’s going on from the markup. Which element is the progress bar? If something is positioned absolutely and set to 100% width, it will fill fill the width of the screen, rather than its parent element (unless it’s parent is set to position:relative).