I have a main container with multiple smaller divs inside it.
None of these small divs have specified widths.
I want the black div to expand and fill up the entire space, stretching all the way to the ABC div on the right.
This only needs to work in Chrome, but compatibility across browsers is appreciated!
<div id="player">
<div id="now_playing">
<div id="now_playing_icon">
A
</div>
<div id="now_next_container">
<div id="now_next_now">
Now: Blah Blah
</div>
<div id="now_next_next">
Next: Blah Blah
</div>
</div>
<div id="timeline">
fills the remaining width with a 20px margin
</div>
<div id="now_playing_controls">
ABC
</div>
</div>
</div>
#now_next_container{
float: left;
padding-top: 15px;
}
#now_next_next{
color: #777777;
font-size: 13px;
}
#now_next_now{
color: #303030;
font-size: 16px;
}
#now_playing{
background: #edeeed;
height: 65px;
width: auto;
}
#now_playing_controls{
color: #303030;
float: right;
font-size: 20px;
height: 65px;
line-height: 65px;
margin-right: 30px;
}
#now_playing_icon{
color: #303030;
float: left;
font-size: 25px;
line-height: 65px;
margin-left: 30px;
padding-right: 10px;
}
#player{
width: 100%;
}
#timeline{
background: black;
color: white;
float: left;
height: 25px;
line-height: 25px;
margin: 20px;
}
Appreciate your help!