Horizontal scrolling using CSS - html

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 David Boone</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 Jon Foreman</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 George Alexson</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 George Alexson</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 George Alexson</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

Answer 1

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