Horizontal div scroller without fixed width - html

Question

I am trying to make a photogallery, the idea is that you have a horizontal(!) slider with all the images (and later on in the script you can click on them, but that is not important). The problem is that all the images do not fit in the layout, so that is why i need some kind of scroll mechanism. This is my HTML:
<section>
<div id="thumbnails">
<div>
<ul>
<li><img></li>
<li><img></li>
.............
<li><img></li>
<li><img></li>
</ul>
</div>
</div>
</section>
And this is my CSS:
div#thumbnails { margin: 0; padding: 0; overflow: auto; }
div#thumbnails * { margin: 0; padding: 0; }
div#thumbnails div { width: 20000px; }
div#thumbnails ul { list-style: none; }
div#thumbnails ul li { display: inline-block; }
section { width: 960px; }
This more or less works like a breeze, except for the fact that the slider is filled with whitespace (obviously due to the width of 20000px;). However, that width of 20000px is nessecary, else the wrapper div wil take the same width as div#thumbnails, and that width is of course 960px (due to the section-tag). The result of that is that the list will get extra rows, and i obvously want only 1 row. So ideally, the wrapper div should get the exact same width as the dynamic list, but i am stuck here. Somebody has an idea how to fix this (preferably without jQuery/JS, it's not very difficult to solve it with javascript)?

Answer 1

Is this what you're looking for?
div#thumbnails {
margin: 0;
padding: 0;
overflow: auto;
}
div#thumbnails * {
margin: 0;
padding: 0;
}
div#thumbnails div {
white-space: nowrap;
}
div#thumbnails ul {
list-style: none;
}
div#thumbnails ul li {
display: inline-block;
}
section {
width: 960px;
}
<section>
<div id="thumbnails">
<div>
<ul>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
</ul>
</div>
</div>
</section>