Динамическая ширина контейнера div с фиксированной высотой и горизонтальной прокруткой?

Я пытаюсь получить контейнер div, который будет прокручиваться горизонтально за пределы области просмотра. Вроде как полноэкранный диафильм с #a в начале и #c в конце. Оба #a и #c - это фиксированные разделители ширины, а #b - содержимое динамической ширины. Проблема, с которой я сталкиваюсь, заключается в том, чтобы #container динамически менять свою ширину, чтобы разместить #b . Установка ширины #container в auto или 100% просто использует ширину видового экрана.

Что мне нужно:

[-  viewport width  -]
--#container--------------------------------------- 
|   --------------------------------------------  | 
|   | #a  |      #b...                    | #c |  |  
|   --------------------------------------------  |
--------------------------------------------------- 

Моя разметка:

#container {
    height:400px;
    }
#a {
    float:left;
    width:200px;
    height:400px;
    }
#b {
    float:left;
    width:auto;
    height:400px;
    }
#c {
    float:left;
    width:200px;
    height:400px;
    }



    
fixed width content
    
dynamic width content
    
fixed width content

Edit: I can do this with a table, but would like to avoid that if possible.

Edit 2: Here's a working version using tables:

#container {
  height:400px;
  background:#fff;
  }
#a {
  width:200px;
  height:400px;
  background:#ccc;
  }
#b {
  height:400px;
  background:yellow;
  white-space: nowrap;
  }
#c {
  width:200px;
  height:400px;
  background:#ccc;
  }


  

    

      a
    
    

      
      
                           
    
    

      b