How to force thumbnails to overflow right and not below

I'm making an image slider with thumbnails. The problem is that when the number of thumbnails exceeds the container's width, the thumbnails obviously go down, below the first row. I'm wondering how you force the thumbnails to stay on a single row and require a horizontal scroll bar.

CSS

#thumbnail-wrap {
    width: 150%;
    padding: 5px;
    max-height: 85px;
}

#thumbnail-wrap img {
    max-height: 75px;
    display: inline;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
}

HTML

<div id="gallery-wrap">
<img id="main-img" src="img/projects/merthyr-dyfan/1.jpg" alt="The chapel"/>
<span id="caption"></span>
<div id="thumbnail-wrap">
<img class="active-thumb" src="img/projects/merthyr-dyfan/1.jpg" alt="Something"/>
<img src="img/projects/merthyr-dyfan/2.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/3.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/4.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/5.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/6.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/7.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/8.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/9.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/10.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/11.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/12.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/13.jpg" alt="Something else"/>
</div>
</div>

I know this is probably very basic, but I wasn't sure how to phrase it to find anything relevant on here or Google. Thanks.