How do I make a child's div width match its content with parent's div width 100% overflow-x: auto in IE & FF

Question

I have an art gallery full of thumbnails. I wanted to add a customized horizontal scrollbar so that users could scroll through a single row of thumbnails. There are different amounts of thumbnails in each gallery. I tried using CSS property "width:-moz-max-content;" however this only works in Firefox and not IE6,7,8, Chrome or Safari.

Here is an example - > http://theo.mypreview.co.uk/ashmolean-museum

The website's width is set to 90% of the viewers browser size.

div class="Content" - the holder
div id="posts" - is where all the thumbnails are generated

sidenote - I have just installed jscroll

Answer 1

There are some very good jquery galleries available that will do what you need. Just google jquery galleries. or http://www.1stwebdesigner.com/design/fresh-jquery-image-gallery-display-solutions/ . I hope this helps