Horizontal scroll overflowing HTML <li>'s without knowing width

Question

http://jsfiddle.net/waitinforatrain/DSSPb/2/

I want to arrange a bunch of <li> elements which represent images in a horizontal scrollable container, like in the example above.

The tricks I've seen so far set the width of the container to be the width of the <li>elements. However, I have no way of knowing what the width of the container will be because the content is dynamic.

Is there a way to do this with CSS without knowing the container width?

Answer 1

Something like this, perhaps? http://jsfiddle.net/mattball/5JRdZ/

• change ul and li display to inline-block
• remove li { float: left; }
• add ul { white-space: nowrap; } so the <li>s don't wrap to the next line when the <ul> is too narrow

Now your problem is solving the li { height: 100%; margin: 4px } causing the <li>s to be taller than the <ul>. (Here's the solution: http://jsfiddle.net/mattball/avTgR/ :)