Проблема с автозаполнением CSS3?

Question

например:

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

Мне нужно * Ширина #left фиксирована, в то время как #right автоматически заполняет пространство, оставшееся в #container?Как этого добиться с CSS3 ?Я использую IE9

Answer 1

Нет необходимости использовать какие-либо новые функции из CSS3.

Пример

CSS

#container {
  border: 3px solid red;  
}

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

#right {
  background: yellow;   
}

jsFiddle .

Answer 2

В качестве альтернативы поплавкам попробуйте использовать display: table-cell; (не будет работать в IE <8): </p>

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

jsfiddle

Answer 3

Пример Алекса хорош, поэтому я буду использовать его код, но я думаю, что, возможно, вы ищете overflow:hidden справа, он не будет перенесен ниже слева.

см. Новый скрипка

#container {
  border: 3px solid red;  
}

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

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