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.

score 96 · Accepted Answer · edited Oct 04 '21 at 14:40

96

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

edited Oct 04 '21 at 14:40

metodribic

1,561
17
27

answered Jun 27 '11 at 18:48

Daniel O'Hara

13,307
3
46
68

I would love to implement that kind of script but my images are not of same width. – Aayush Jun 27 '11 at 19:01
4

Set the width after the images are loaded and you can find the total of their widths. – jsonnull Jun 27 '11 at 21:18
2

although this works, i fail to understand why we need an outer div? – a7omiton Jun 15 '14 at 10:27
@a7omiton I think that without it, the elements that wrap it (possibly ) would stretch, making the scrolling apply to the entire wrapper instead of just the images. – psyren89 Jul 17 '14 at 07:09
@a7omiton I explain why it works and is necessary here: https://stackoverflow.com/a/44206428/4038790 I hope it helps you and others. – lwdthe1 May 26 '17 at 16:43

score 77 · Answer 2 · edited Jun 20 '20 at 09:12

77

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 27 '11 at 21:12

clairesuzy

27,296
8
54
52

12

This is the best answer here, since it doesn't rely on the inflexible nature of a fixed width. – Danny Dulai Nov 05 '12 at 21:42
And because it has a jsfiddle – Sam Denty Jul 17 '17 at 13:50

score 1 · Answer 3 · answered Dec 11 '16 at 13:33

1

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.

answered Dec 11 '16 at 13:33

papiro

2,158
1
20
29

score 1 · Answer 4 · answered Jun 27 '11 at 19:01

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/

score 0 · Answer 5 · edited Feb 23 '18 at 19:40

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

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

Think of the outer div as a movie screen and the inner div as the setting in which the characters move around. If you were viewing the setting in person, that is without a screen around it, you would be able to see all of the characters at once assuming your eyes have a large enough field of vision. That would mean the setting wouldn't have to scroll (move left to right) in order for you to see more of it and so it would stay still.

However, you are not at the setting in person, you are viewing it from your computer screen which has a width of 500px while the setting has a width of 1000px. Thus, you will need to scroll (move left to right) the setting in order to see more of the characters inside of it.

I hope that helps anyone who was lost on the principle.

Make content horizontally scroll inside a div

5 Answers5

test code

Linked

Related