Question

All the code is inline here:
http://shanxinc.com/test/fancybox2/

All I’m trying to do is get a row of thumbnails into one line. The white-space and display:inline stuff mentioned here is not working.

So as the code will show on my website above, I’m even trying the kludgy table and table-cell stuff. This puts the thumbnails in one line, but does not show the horizontal scrollbar (I want the line of thumbnails to be maximum width of the big image above it). The overflow-x: scroll directive is doing nothing.

Questions:

1. Is it possible to achieve this desired effect without using table and table-cell? I do want this to be “responsive”, and somehow I feel the table stuff may not work on mobile screens.

2. Either way, how can I get the horizontal bar to show?

Many thanks for any ideas!

---

Edit: Code added here too:

The html code on that page is quite clean and simple, so you could view source?

Here’s the HTML:

 <div class="holder">
      <img src="demo/img1.jpg" alt="" width="600" height="350">
      <div class="thumbnails">
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
      </div>
</div>

Here’s the old CSS I tried, which did not work, using display: inline:

.holder { width: 600px; display: block;  }
.thumbnails { display: block; overflow-x: scroll !important; height: 75px; white-space: nowrap; }
.thumbnails a { display: inline; width: 75px; height: 50px; float: left; }
.thumbnails a .thumb { width: 75px; height: 50px; display: inline; }

Here’s what I’m trying now:

.holder, .thumbnails { width: 600px; }
.thumbnails { display: table; overflow-x: scroll; white-space: nowrap; }
.thumbnails a { display: table-cell; padding-right: 2px  }
.thumbnails a .thumb { width: 75px; height: 50px; }

This shows the thumbnails in one line, but no horizontal scroll.

Thanks!

Answer 1

You can do this by following these steps:

1. Remove all <br> elements
2. Change the display rule for the CSS class .thumbnails from table to block:

.thumbnails { display: block; overflow-x: scroll; white-space: nowrap; }

And you will get this:

http://oi48.tinypic.com/audpba.jpg

Cheers!