Horizontal Scrolling?

[MissBonnieMadness]

Trying to make a thread template with horizontal scrolling pictures. I feel like I had seen this done somewhere before, but I can't find anything? 

I've tried "overflow-x:auto" and it just kinda ignores my X there. Here's what I've got


[div align="center"][div style="width:400px;height:400px;overflow-x:auto;"][img src="https://orig00.deviantart.net/1399/f/2018/063/2/0/icon__jaimie_alexander_by_weaknessgraphics-dc4xgc0.png"][img src="https://s-media-cache-ak0.pinimg.com/originals/d6/8f/34/d68f34fd60cba57cfd3095a4d9de2fe1.jpg"][img src="https://pbs.twimg.com/profile_images/794577993075200000/ZG5b8YQY_400x400.jpg"][/div][/div]



In my searches I had seen that some people had accidentally made a horizontal overflow, so I thought if I maybe crammed the width and didn't leave space in between the images, it would naturally flow horizontally? Idk, I'm just making junk up as I go. Please let me know if there's any way to do this! <3

[Retread]

Dec 4, 2018 16:56:32 GMT -8 MissBonnieMadness said:

Trying to make a thread template with horizontal scrolling pictures. I feel like I had seen this done somewhere before, but I can't find anything? 

I've tried "overflow-x:auto" and it just kinda ignores my X there. Here's what I've got


[div align="center"][div style="width:400px;height:400px;overflow-x:auto;"][img src="https://orig00.deviantart.net/1399/f/2018/063/2/0/icon__jaimie_alexander_by_weaknessgraphics-dc4xgc0.png"][img src="https://s-media-cache-ak0.pinimg.com/originals/d6/8f/34/d68f34fd60cba57cfd3095a4d9de2fe1.jpg"][img src="https://pbs.twimg.com/profile_images/794577993075200000/ZG5b8YQY_400x400.jpg"][/div][/div]



In my searches I had seen that some people had accidentally made a horizontal overflow, so I thought if I maybe crammed the width and didn't leave space in between the images, it would naturally flow horizontally? Idk, I'm just making junk up as I go. Please let me know if there's any way to do this! <3

Hi MissBonnieMadness

I'm a beginner at coding so this is probably less elegant than it could be. But I think it does what you want.

Starting from the inside working out, each image is hard-specified for the height at width so even if you change the images, it will force them to be 400px x 400px. They've each been given a float, so when the first one takes its place, it allows the following one to be placed next to it, rather than below.

Moving outward from there, the inner div creates a 1200px wide by 400px high container in which the three images are contained.

The next div out from that creates a 400px wide by 418px high container. (I guess the extra 18px I needed to add to prevent a vertical scroll bar is necessary because the scroll bar needs to be included in the size of the container). If you need the result to be exactly 400 x 400, you could make the images and inner div 18px shorter.

The outer div is just to center the whole thing horizontally in the post, as you originally had it.

Here's the BBCode:

[div align="center"][div style="width:400px;height:418px;overflow:auto;"][div style="width:1200px;height:400px;"][img style="width:400px;height:400px;float:left;" src="https://orig00.deviantart.net/1399/f/2018/063/2/0/icon__jaimie_alexander_by_weaknessgraphics-dc4xgc0.png" alt=" "][img style="width:400px;height:400px;float:left;" src="https://s-media-cache-ak0.pinimg.com/originals/d6/8f/34/d68f34fd60cba57cfd3095a4d9de2fe1.jpg" alt=" "][img style="width:400px;height:400px;float:left;" src="https://pbs.twimg.com/profile_images/794577993075200000/ZG5b8YQY_400x400.jpg" alt=" "][/div][/div][/div]

And the result:

Does that work for you?

[MissBonnieMadness]

Dec 4, 2018 20:57:17 GMT -8 Retread said:

Dec 4, 2018 16:56:32 GMT -8 MissBonnieMadness said:

Trying to make a thread template with horizontal scrolling pictures. I feel like I had seen this done somewhere before, but I can't find anything? 

I've tried "overflow-x:auto" and it just kinda ignores my X there. Here's what I've got


[div align="center"][div style="width:400px;height:400px;overflow-x:auto;"][img src="https://orig00.deviantart.net/1399/f/2018/063/2/0/icon__jaimie_alexander_by_weaknessgraphics-dc4xgc0.png"][img src="https://s-media-cache-ak0.pinimg.com/originals/d6/8f/34/d68f34fd60cba57cfd3095a4d9de2fe1.jpg"][img src="https://pbs.twimg.com/profile_images/794577993075200000/ZG5b8YQY_400x400.jpg"][/div][/div]



In my searches I had seen that some people had accidentally made a horizontal overflow, so I thought if I maybe crammed the width and didn't leave space in between the images, it would naturally flow horizontally? Idk, I'm just making junk up as I go. Please let me know if there's any way to do this! <3

Hi MissBonnieMadness

I'm a beginner at coding so this is probably less elegant than it could be. But I think it does what you want.

Starting from the inside working out, each image is hard-specified for the height at width so even if you change the images, it will force them to be 400px x 400px. They've each been given a float, so when the first one takes its place, it allows the following one to be placed next to it, rather than below.

Moving outward from there, the inner div creates a 1200px wide by 400px high container in which the three images are contained.

The next div out from that creates a 400px wide by 418px high container. (I guess the extra 18px I needed to add to prevent a vertical scroll bar is necessary because the scroll bar needs to be included in the size of the container). If you need the result to be exactly 400 x 400, you could make the images and inner div 18px shorter.

The outer div is just to center the whole thing horizontally in the post, as you originally had it.

Here's the BBCode:

[div align="center"][div style="width:400px;height:418px;overflow:auto;"][div style="width:1200px;height:400px;"][img style="width:400px;height:400px;float:left;" src="https://orig00.deviantart.net/1399/f/2018/063/2/0/icon__jaimie_alexander_by_weaknessgraphics-dc4xgc0.png" alt=" "][img style="width:400px;height:400px;float:left;" src="https://s-media-cache-ak0.pinimg.com/originals/d6/8f/34/d68f34fd60cba57cfd3095a4d9de2fe1.jpg" alt=" "][img style="width:400px;height:400px;float:left;" src="https://pbs.twimg.com/profile_images/794577993075200000/ZG5b8YQY_400x400.jpg" alt=" "][/div][/div][/div]

And the result:

Does that work for you?

That it does, thank you so much!