Question

I have a containing div with a few divs within it.

None of these have widths.

I am looking to make the black div fill the entire space, so it stretches to the ABC div on the right.

Only needs to work in Chrome, though cross-browser of course 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">
            fill the remainder width 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;
}
​

http://jsfiddle.net/WCpHh/

Thanks in advance.

Answer 1

Given that you only need to support Webkit, as stated in your question, this raises the possibility of using the flex-box model. This is, of course, still in a vendor-prefixed mode:

#player {
    background-color: #eee;
    padding: 1em;
    text-align: center;
}

#now_playing {
    border: 1px solid #000;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
}

#now_playing_icon {
    display: -webkit-flex-inline;
    -webkit-order: 1;
    -webkit-flex: 1 1 auto;
}

#now_next_container {
    display: -webkit-flex-inline;
    -webkit-flex-direction: column;
    -webkit-order: 2;
    -webkit-flex: 1 1 auto;
}

#timeline {
    color: #f90;
    background-color: #000;
    display: -webkit-flex-inline;
    -webkit-order: 3;
    -webkit-flex: 4 1 auto;
}

#now_playing_controls {
    display: -webkit-flex-inline;
    -webkit-order: 4;
    -webkit-flex: 1 1 auto;
    margin-left: 20px;
}
​

JS Fiddle demo.

This doesn’t, exactly, ‘use the remaining space,’ it’s explicitly instructed to be (and I’m…struggling to explain this, since I’ve only just started experimenting) four times larger than the other items in the same row (its flex-grow property (the 4 in 4 1 auto) instructs it to ‘grow’ four times larger. But it does, I think, meet your needs, given a relatively up-to-date incarnation of Chrome.

References:

• CSS Flexbox Please! (Flexbox playground/demo).
• CSS Flexible Box Layout Module (W3.org).
• ‘Using CSS Flexible Boxes’ (MDN).