title: Dynamic width container div with fixed height and horizontal scroll?
body: <p>I'm trying to get a container div that will scroll horizontally beyond the viewport. Sort of like a fullscreen filmstrip with <code>#a</code> at the beginning and <code>#c</code> at the end. Both <code>#a</code> and <code>#c</code> are fixed width divs, and <code>#b</code> has dynamic width image content. The problem I'm having is getting <code>#container</code> to change its width dynamically to accommodate <code>#b</code>. Setting <code>#container</code> width to auto or 100% just uses the viewport width.</p>
  
  <p>What I'm after:</p>
  
  <pre><code>[-  viewport width  -]
  --#container--------------------------------------- 
  |   --------------------------------------------  | 
  |   | #a  |      #b...                    | #c |  |  
  |   --------------------------------------------  |
  --------------------------------------------------- 
  </code></pre>
  
  <p>My markup:</p>
  
  <pre><code>#container {
      height:400px;
      }
  #a {
      float:left;
      width:200px;
      height:400px;
      }
  #b {
      float:left;
      width:auto;
      height:400px;
      }
  #c {
      float:left;
      width:200px;
      height:400px;
      }
  
  
  &lt;div id="container"&gt;
      &lt;div id="a"&gt;fixed width content&lt;/div&gt;
      &lt;div id="b"&gt;dynamic width content&lt;/div&gt;
      &lt;div id="c"&gt;fixed width content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Edit:</strong> I can do this with a table, but would like to avoid that if possible.</p>
  
  <p><strong>Edit 2:</strong> Here's a working version using tables:</p>
  
  <pre><code>#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;
    }
  
  &lt;table cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
      &lt;td id="a"&gt;
        a
      &lt;/td&gt;
      &lt;td id="b"&gt;
        &lt;img src="..." /&gt;
        &lt;img src="..." /&gt;
        &lt;img src="..." /&gt;                     
      &lt;/td&gt;
      &lt;td id="c"&gt;
        b
      &lt;/td&gt;       
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>