Make the content scroll horizontally in a div

Question

I have a unit in which I want to display images and click them in the lightbox. I placed them on the left and displayed them in a row. set overflow-x to scroll, but it still puts the images below when the row space is not enough. I want them to be inline and display horizontal scrolling when needed.

NOTE. I can not change the structure of the images inside. It should be img inside the anchor. My lightbox requires it.

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 simple, but I just can't do it. I don’t know what happened.

Answer 1

There might 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 internal width of a container, like this one:

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

Answer 2

if you remove float: left from 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 number of images.

or even:

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

which will also vertically align images of different heights if required

test code

Answer 3

The problem is that your img will always go to the next line due to the containing div .

To get around this, you need to put img in your own div with width wide enough to hold all of them. Then you can use your styles as is.

So when I set img to 120px each and put them inside

 div#insideDiv{ width:800px; } 

everything is working.

Adjust the width if necessary.

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

Answer 4

Same as clairesuzy's answer, except that you can get a similar result by adding display: flex instead of white-space: nowrap . Using display: flex will change the "img" fields, if that is preference.

Answer 5

@ marcio-junior's answer ( https://stackoverflow.com/a/166168/ ) works fine, but I wanted to explain to those who don’t understand why it works:

@ a7omiton Along with @ psyren89's answer to your question

Think of the outer div as the movie screen, and the inner div as the parameter in which the character is around the movie. If you looked at this setting personally, that is, without a screen around it, you could see all the characters at once, because your eyes have a fairly large field of view. This would mean that the installation should not have scrolled (move left-right) so that you can see it more, and therefore it will remain motionless.

However, you are not in the setting personally; you are viewing it from your computer screen with a width of 500 pixels, while the setting has a width of 1000 pixels. Thus, you will need to scroll (move left-right) the parameter to see more characters inside it.

I hope this helps anyone who is lost by the principle.