Make content horizontally scroll inside a div

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.

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);
});

if you remove the float: left from the a and add white-space: nowrap to the outer div

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

this should work for any size or amount of images..

or even:

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

which would also vertically align images of different heights if required

test code

The problem is that your imgs will always bump down to the next line because of the containing div.

In order to get around this, you need to place the imgs in their own div with a width wide enough to hold all of them. Then you can use your styles as is.

So, when I set the imgs to 120px each and place them inside a

div#insideDiv{
    width:800px;
}

it all works.

Adjust width as necessary.

See http://jsfiddle.net/jasongennaro/8YfRe/

Same as what clairesuzy answered, except you can get a similar result by adding display: flex instead of white-space: nowrap. Using display: flex will collapse the img "margins", in case that behavior is preferred.

Make content horizontally scroll inside a div

test code

Related

Recent Posts