Make content horizontally scroll inside a div

Question

I have a division in which I wanna show images and on click open them in a lightbox. I have floated them left and displayed them inline. set overflow-x to scroll but it still puts the images below once the row space is not enough. I wanna get them to be inline and display a horizontal scroll when needed.

NOTE: I can't change the structure of the images inside. It has to be a img inside an anchor. My lightbox requires it like that.

HTML:

<div id="myWorkContent">     <a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>     <a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>     <a href="assets/work/3.jpg"><img src="assets/work/3.jpg" height="190" /></a>     <a href="assets/work/4.jpg"><img src="assets/work/4.jpg" height="190" /></a>     <a href="assets/work/5.jpg"><img src="assets/work/5.jpg" height="190" /></a>     <a href="assets/work/6.jpg"><img src="assets/work/6.jpg" height="190" /></a> </div><!-- end myWorkContent --> 

CSS:

#myWorkContent{     width:530px;     height:210px;     border: 13px solid #bed5cd;     overflow-x: scroll;     overflow-y: hidden; } #myWorkContent a {     display: inline;     float:left } 

I know this is very basic but I just can't get it done. Don't know what's wrong.

Answer 1

It may be something like this in HTML:

<div class="container-outer">    <div class="container-inner">       <!-- Your images over here -->    </div> </div> 

With this stylesheet:

.container-outer { overflow: scroll; width: 500px; height: 210px; } .container-inner { width: 10000px; } 

You can even create an intelligent script to calculate the inner container width, like this one:

$(document).ready(function() {    var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;    $(".container-inner").css("width", container_width); });