Dynamic width of container div with fixed height and horizontal scroll?

Question

I am trying to get a div container that will scroll horizontally outside the viewport. It looks like a fullscreen filmstrip with #a at the beginning and #c at the end. Both #a and #c are fixed div widths, and #b has a dynamic width image. The problem I am facing is that #container dynamically change its width to accommodate #b . Setting the width of #container to auto or 100% uses only the width of the viewport.

What I need:

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

My markup:

 #container { height:400px; } #a { float:left; width:200px; height:400px; } #b { float:left; width:auto; height:400px; } #c { float:left; width:200px; height:400px; } <div id="container"> <div id="a">fixed width content</div> <div id="b">dynamic width content</div> <div id="c">fixed width content</div> </div> 

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

Edit 2: Here is the 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; } <table cellpadding="0" cellspacing="0"> <tr> <td id="a"> a </td> <td id="b"> <img src="..." /> <img src="..." /> <img src="..." /> </td> <td id="c"> b </td> </tr> </table> 

Answer 1

 <div id="container"> <div id="a">fixed width content</div> <div id="b"> <img src="http://karenrothart.com/yahoo_site_admin/assets/images/Landscape_Panorama.13130817_large.jpg" />dynamic width content dynamic width content dynamic width content dynamic width content </div> <div id="c">fixed width content</div> </div> 

Here is a good css:

 div { height: 400px; } #container { position: relative; /* needed for absolutely positioning #a and #c */ padding: 0 200px; /* will offset for width of #a and #c; and center #b */ border: green 3px dotted; /* just for the show */ float: left; /* To dynamicaly change width according to children */ } #a, #b { position: absolute; /* causes #a and #b to not respect padding of #container and also gives it its place */ top: 0; width:200px; left: 0; } #c { right: 0; } 

Good and brilliant example: http://jsfiddle.net/KefJ2/

If you need more than one image than add this:

 #b { white-space: nowrap; /* causes all direct child elements to be in one line */ } 

An example with a lot of images: http://jsfiddle.net/KefJ2/1/ Obviously, you will have to play with the layout of the text and images in #b , but this should be quite simple :)