how to set width of inline-block html element to fill parent without extending outside parent

setup: two inline-block elements a & b inside div c if width of b is 100% in the css - b will extend outside c by the width of a. (c has white-space: nowrap; set) The goal is to have a&b fit without overflow by setting b to the correct width via css. i.e. width c = width of a+b

The only way I've been able to achieve this is to set b.width(parent.width() - a.width()) from javascript. But the goal is to avoid javascript & just use css, &or changes in the html structure to get the right width for b.

question: is 'is it possible to set the width of b without resorting to javascript'?

If the above is unclear there is an example with code and visible htm开发者_如何学运维l at http://jsfiddle.net/9aQhR/45/ thnx

To have both layers fit inside a parent layer, without specifying width explicitly for layer b, you need to float layer a, like this:

<div class='outer3'>
    <div class='a1'></div>
    <div class='c1'>test</div>
</div>

<style>
    .a1 {
        float: left;
        background-color: rgb(255,0,0);
        height: 40px;
        width: 20px;
    }

    .c1 {
        height: 40px;
        background: #0000ff;
    }

    .outer3 {
        width: 200px;
        border: 1px solid black;
        margin: 0px;
        padding: 0px;
        background: #00ff00;
    }
</style>

Example can be found here also: http://jsfiddle.net/fbewp/16/