CSS3 auto-fill problem?

for example:

<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

I need #left's width is fixed while #right auto fills the space left in #cont开发者_StackOverflow社区ainer? How to achieve this with CSS3 ? I am using IE9

There is no need to use any of the new features from CSS3.

Example

CSS

#container {
  border: 3px solid red;  
}

#left {
  width: 100px;  
  float: left;   
  background: blue;
  color: white;
}

#right {
  background: yellow;   
}

jsFiddle.

Alex's example is good so I'll use his code, but I think maybe you're looking for overflow:hidden on the right side it will not wrap below the left.

see new fiddle

#container {
  border: 3px solid red;  
}

#left {
  width: 100px;  
  float: left;   
  background: blue;
  color: white;
}

#right {
  background: yellow;
  overflow: hidden;
}

As an alternative to the floats, try using display: table-cell; (won't work in IE<8):

#container {
  border: 3px solid red;  
}
#container > div {
    display: table-cell;
}
#left {
  min-width: 100px;  
  background: blue;
  color: white;
}
#right {
  width: 100%;
  background: yellow;   
}

jsfiddle