Dynamic width with inline-block

There's no particular reason to use display: inline-block to do this.

Here's a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/

<div id="container">
    <div id="DivB">b</div>
    <div id="DivA">a</div>
</div>

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
}
#DivB {
    float: right;
    width: 100px;
}

This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.

So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).

Your code should look like this:

.fixed-width-element {
  display: inline-block;
  width: 150px;
}

.variable-width-element {
  display: inline-block;
  width: calc(100% - 150px);
}

I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/

I have gone for a traditional two column layout, as it seems like the best way to solve your problem.

float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.