CSS: Fixed width + Dynamic width children, filling 100% parent width?

Question

I have a parent div (- in diagram) who's width I don't know in advance.

I have two child divs (a and b):

b - is always a known fixed width, and should always be positioned on the right.

a - should fill the remaining space

-----------------------------------
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
- a                        a b  b -
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
-----------------------------------

Both a and b are of equal fixed height.

I imagine there is a simple solution to this, but I haven't found it yet. I've tried floating both, but one or the other gets pushed below.

Any ideas?

Answer 1

You are looking for the holy grail :) The article has a full example and walk through but here is the summary.

Your wrapping div needs to have a right padding the same width as the static width column you want. The inner divs are floated left and the static width column is moved in to the padded region by using a negative margin.

Here is the markup from the tutorial

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

and the css

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

the tutorial is a 2 column example but if you get rid of the left column and removed the left padding from the the container you should be good to go.

Answer 2

may be you can use display:table property like this http://jsfiddle.net/sandeep/NCkL4/8/

html:

<div class="left"></div>
 <div class="right">fixed</div>

css:

#parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}

but it's not support IE7.

or you can do it this:

html:

<div class="right">fixed</div>
<div class="left"></div>

css:

.right {float:right; width:200px; }
.left { background: green;}

check this http://jsfiddle.net/47YMn/1/

new fiddle http://jsfiddle.net/sandeep/47YMn/7/