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

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

-----------------------------------
- aaaaa开发者_如何学Caaaaaaaaaaaaaaaaaaaaa 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?

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.

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/

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Especially this since you want fixed size container at the right side: ( this does make more sense for mobile devices.. ) http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Sry, actually this one i guess: http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm

What about display: flex?

#parent{   
    background:yellow;  
    display:inline-flex;
}
.left{
    display:flex;
    flex: 1 1 auto;
}
.right{   
    display:flex;  
    background-color:red;
}

http://jsfiddle.net/NCkL4/1037/

This one uses floats, whereas the other excellent answer above uses positioning. It's up to you which you chose. Each has its merits and drawbacks.

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }
body { font: normal 100%/1.5em "Helvetica Neue", Helvectica, Arial, sans-serif; color: #353E34; background: #FFF; text-align: left; }
html>body { font-size: 16px; }
.content-wrapper { width: 100%; float: left; }
.content { margin-right: 220px; background: #9CC; }
.sidebar { float: right; width: 200px; margin-left: -200px; background: #FDE95E; }
.inner { margin: 10px; }
.footer { clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; }

HTML

<div class="content-wrapper">
  <div class="content">
    <div class="inner">
      <p>Content</p>
    </div>
  </div>
</div>
  <div class="sidebar">
    <div class="inner">
      <p>Sidebar</p>
    </div>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>

This is a clean and very acceptable way. Making good use of how floats work here, used the clear fix here but to clear the floats you could also use an extra div with clear:right on it, just before the container closing tag.

http://jsfiddle.net/sg3s/sSJvT/