Horizontal scrolling using CSS

Question

So I am trying to accomplish horizontal scrolling for a client using just CSS (I know there are a lot of JavaScript libraries out there that help with this but I'm trying to avoid those).

I have some basic code down (thanks to help from this link and the JSFiddle therein: CSS horizontal scroll) but am unable to actually make it work.

Here is my example code that I am trying to work with: http://jsfiddle.net/8Bkxh/

HTML:

    <section class="row">
    <div class="scroll-wrap">
        <div class="span4">
            <div class="video-list">
                <div class="vid-thumb-wrap">
                    <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot.png');?> ">

                    <div class="vid-title">
                        <h5>In-Studio Tutorial On Recording</h5>
                        <p>By <a href="#">David Boone</a></p>
                    </div><!-- .vid-title -->

                    <div class="callout upcoming">
                        <p>Purchase Tickets Now!</p>
                    </div><!-- .callout upcoming -->
                </div><!-- .vid-thumb-wrap -->
            </div><!-- .video-list -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="video-list">
                <div class="vid-thumb-wrap">
                    <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot2.jpg');?> ">

                    <div class="vid-title">
                        <h5>[Interview] The Revolution of Individual Production</h5>
                        <p>By <a href="#">Jon Foreman</a></p>
                    </div><!-- .vid-title -->

                    <div class="callout live">
                        <p>Happening Now!</p>
                    </div><!-- .callout live -->
                </div><!-- .vid-thumb-wrap -->
            </div><!-- .video-list -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->
    </div><!-- .scroll-wrap -->
</section><!-- .row -->

CSS:

.row {
    position: relative; 
    width: 960px!important;
}

.scroll-wrap { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 180px!important; 
    white-space: nowrap!important;   
}

Be sure to check the three external resources I have linked in that JSFiddle

All I want to do is allow the user to scroll through these five items horizontally not vertically.

I think I'm just having a mental block somewhere and I hope this may be a quick fix for somebody out there. I really appreciate any and all help where possible and I would be happy to clarify where possible.

Thanks,

Keenan

burnedikt · Accepted Answer · 2013-07-30T17:11:03.653

3

I've experienced this issue before and solved it by setting the inner divs to display: inline-block and extend the containing div with white-space: nowrap like you already did.

Works, but I don't have an idea why your solution does not work. I am quite sure I used this for some years in the same way and at some point it just stopped working.

Edit: In case of bootstrap, you might want to explicitely set the float value to none

edited Jul 30 '13 at 17:11

answered Jul 29 '13 at 21:27

burnedikt

962
5
17

I know, I tried setting the outer and inner divs to `display: inline-block;` but I just cannot get it to work for some reason. – Keenan Payne Jul 30 '13 at 15:43
1

The outer div with class `scroll-wrap` stays with `display: block`. Only all divs with class `span4`have to be set to `display: inline-block`. Here check the fiddle with your example: [jsfiddle](http://jsfiddle.net/eL5mK/) – burnedikt Jul 30 '13 at 15:54
Ah, thank you! Actually, it was setting that display property as well as making sure the `span4` classes were not floating left (as Bootstrap makes them by default). Thanks for your help! – Keenan Payne Jul 30 '13 at 17:09

Horizontal scrolling using CSS

1 Answers1