Search code examples
cssscrollgallerypositioningthumbnails

Only horizontal scroll with CSS

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;
}

enter image description here

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>
Solution

  • 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;
}