Only horizontal scroll with CSS - css

Question

in the image gallery i'm working on, I want a horizontal scroll (ie. the thumbnails are listed horizontal) and the area containing them should have a fixed width with scroll if there are to many to fit the area.
Below is the CSS code so far, but it doesn't seem to work as you can see on the snapshot below the code. What can I write to accomplish what I want?
Thanks in advance!
#thumbnailArea {
padding: 5px;
width: 600px;
height: 90px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
The HTML code for the thumbnail area (generated with ASP.net webforms) is as follows:
<div id="thumbnailArea">
<a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>
<a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a>
and so on...
</div>

Answer 1

That's because the container fits to the width you've provided. To achieve the desired effect, you should use two nested divs: outer with given width and inner holding the images.
Example: http://jsfiddle.net/jTJFa/1/
Html:
<div class="box">
<div class="area">
<img/>
...
</div>
</div>
Css:
.box {
width: 500px;
overflow-x: scroll;
}
.area {
width: 1000px;
}

Answer 2

Although you've turned off vertical scrolling, the #thumbnailArea width is not affected (and as a result, forces wrap). This should do the trick:
#thumbnailArea {
white-space:nowrap;
}

Answer 3

For this to work you need a div inside the thumbnail div with a width so that all pictures fit inside:
<div id="thumbnailArea">
<div style="width: 1000px;">
<a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>
<a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>
and so on...
</div>
</div>
That should do the trick, alter the width so that you don't have a massive empty space at the end