Question

I need the center div div#b to fill out the gab between div#a and div#c.

<div id="a">
    <span>Div1</span>
</div>
<div id="b">
    <span>Div2</span>
</div>
<div id="c">
    <span>Div3</span>
</div>

I tried to do this by placing width: 100% on div#b but without luck.

div
{
    border:1px solid red;
}
div#a
{
    float:left;
    width:50px;
}
div#b
{
    float:left;
    width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
    float:right;
    width:50px;
}

How can I get div#b to expand from div#a to div#c?

There can be no line breaks.

Answer 1

CSS3

You can implement this dynamic behavior using the CSS3 Flexible Box Layout Module:

<style type="text/css">
    div.Container
    {
        width: 100%;
        display: box;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
    }
    div.B
    {
        background: magenta;
        box-flex: 1;
        -moz-box-flex: 1;
        -ms-box-flex: 1;
        -webkit-box-flex: 1;
    }
</style>

<div class="Container">
    <div style="width: 50px; background: cyan;">
        A
    </div>
    <div class="B">
        B
    </div>
    <div style="width: 50px; background: yellow;">
        C
    </div>
</div>

A new version of FireFox, a new version of Google Chrome, Internet Explorer 10 and a new version of Safari supports CSS3 flexible box layout. Internet Explorer 9 and Opera is lacking support at the moment.

I also want to mention this new way to do it in FireFox:

<div style="float: left; width: 50px; background: cyan;">
    A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
    B
</div>
<div style="float: left; width: 50px; background: yellow;">
    C
</div>

FireFox is the only browser that support the calc function at the moment.

---

CSS2

Here is the old way to do it:

<div style="padding-left: 100px;">
    <div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
        A
    </div>
    <div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
        B
    </div>
    <div style="float: left; width: 50px; background: yellow;">
        C
    </div>
</div>

A width of 100% inside the container div is the width of the container minus the 100px left padding. Then there is room for the left and right 50px div elements. Then you have to position them using some negative margin and floating.

---

Feature detection

Use feature detection with Modernizr. Then you can use CSS2 for browsers that lack support for CSS3 flexbox.

If you do .NET development you can download Modernizr with NuGet.