How to force thumbnails to overflow right and not below


Tags: html,css,image,overflow

Problem :

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.



Solution :

How about using <nobr> tag

#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;
}
<div id="gallery-wrap">
    <nobr>
<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>
    </nobr>
</div>


    CSS Howto..

    How to style JavaScript created text using CSS's @font-face

    How to change the background colour's opacity in CSS [duplicate]

    How to override the external CSS using some condition in Jquery?

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    How to make Bootstrap container auto for height?

    How to make CSS animation jump rather than slide

    DotNetNuke Skinning: How do I use\add skin.css?

    Jquery button click to show div right to left with slide animation

    How to style all the same XSL FO elements? XSL FO like CSS?

    How to auto margin-left for the message bar

    How to change the style of an active menu with php + css

    How to change CSS style upon clicking button with JS

    How to adjust the position of specific elements/items/content on a page with CSS

    how to fadein an inline element as a block element

    How to identify element using link name in a onclick html tag?

    How to get ID from CSS to Javascript without getElementByID?

    How to create mirrored image effect with CSS single element

    How do I get rid of this blue halo around the close dialog button with jqueryui?

    How can I hide slide menu in appcelerator?

    CSS - How to add a second gradient to make this button half transparent?

    How to create slideshow in css without having to make more than one class?

    How to show foreground image and then hide on hover?

    How can I resize my iframe keeping the ratio?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    How to maneuver between two divs using CSS?

    How to prevent page jump when using # href to swap gallery images using a div ID?

    How to inject javascript var into css

    How can I vertically align two floated divs?

    How to set css attribute for pseudo element in Dart

    How to make a background color stretch to left and right of viewport in Safari Browsers