Horizontal scroll bar - needs to be vertical!

[Aeryn]

Hello! Sorry to ask such a small thing like this, but it's driving me crazy! I can usually figure out things like this, but this just has me stuck.


My forum is here. In the forum statistics at the bottom, the online and offline list of users only scrolls horizontal and does not fill the area correctly. Basically, it doesn't break between pictures for some reason. It's so ugly to me and I'd love to have it fill downwards. Here's a screenshot in case it changes.



And here's the code I use for it

Layout Templates > Home

<div class="healonline2">{foreach $[online_user_24]}
$[online_user_24.avatar_quote]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}
                                       {/foreach}
{if $[total_online_not_shown_24]}
, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
           {/if}</div>



Advanced Styles & CSS
.healonline2 {
   padding:5px;
   height:125px;
   width: inherit;
overflow: auto;
}

Note: I did not code this, I got it from a resource site. It worked perfectly until I changed the online and recently online names from text to images.

Thanks so much for your help! And if I need to show anything else let me know~

[Quozzo]

Add this:

.healonline .avatar-wrapper {
  float: left;
}


[Lynx]

Quozzo,

Just curious, but would changing the overflow: auto; to overflow-y: auto; help with that, so only the y-axis gets the scrollbar?

[Tumbleweed]

Jul 11, 2017 9:35:31 GMT -8 Lynx said:

Quozzo ,

Just curious, but would changing the overflow: auto; to overflow-y: auto; help with that, so only the y-axis gets the scrollbar?

That's what I was thinking, using the axis but it would be x I think the OP wants.  I know on one vertical scroll bar I had, it was a pain to get to work and ended up with the y to hidden  and the x to scroll (auto works too, just tried it) to get it to work. And to top it off, on that one I had to add anther div inside my first div and make the width over first div's width to get it to work. 

[Lynx]

Jul 12, 2017 1:19:37 GMT -8 Tumbleweed said:

Jul 11, 2017 9:35:31 GMT -8 Lynx said:

Quozzo ,

Just curious, but would changing the overflow: auto; to overflow-y: auto; help with that, so only the y-axis gets the scrollbar?

That's what I was thinking, using the axis but it would be x I think the OP wants.  I know on one vertical scroll bar I had, it was a pain to get to work and ended up with the y to hidden  and the x to scroll (auto works too, just tried it) to get it to work. And to top it off, on that one I had to add anther div inside my first div and make the width over first div's width to get it to work. 

I thought x was horizontal and y was vertical, but I could have them mixed up.

[Kami]

Jul 12, 2017 9:38:37 GMT -8 Lynx said:

Jul 12, 2017 1:19:37 GMT -8 Tumbleweed said:

That's what I was thinking, using the axis but it would be x I think the OP wants.  I know on one vertical scroll bar I had, it was a pain to get to work and ended up with the y to hidden  and the x to scroll (auto works too, just tried it) to get it to work. And to top it off, on that one I had to add anther div inside my first div and make the width over first div's width to get it to work. 

I thought x was horizontal and y was vertical, but I could have them mixed up. :)

You are correct.

[Tumbleweed]

You two are right and I was either switching them around or thinking the OP wanted the opposite of what she wanted. I have no idea now, what I was thinking then.

[Lynx]

Jul 12, 2017 14:54:08 GMT -8 Tumbleweed said:

You two are right and I was either switching them around or thinking the OP wanted the opposite of what she wanted. I have no idea now, what I was thinking then.

It's okay, Tumbleweed. I have moments like that ... usually more often than I want them.

[Aeryn]

Hi this is the OP! I got locked out of my account so this is a new one I had to make. Sorry for the late reply!

The code Quozzo gave me worked perfectly, so thank you so much Quozzo!!

I have tried to change overflow to overflow-x and overflow-y and play around with it like that, but none of it was changing anything at all ):

Thank you all for responding!!

[Lynx]

Jul 13, 2017 10:25:40 GMT -8 Aeryn said:

Hi this is the OP! I got locked out of my account so this is a new one I had to make. Sorry for the late reply!

The code Quozzo gave me worked perfectly, so thank you so much Quozzo!!

I have tried to change overflow to overflow-x and overflow-y and play around with it like that, but none of it was changing anything at all ):

Thank you all for responding!!

Did you just put overflow-y or did you put it as overflow-y: auto; - the latter is the correct one (including the semi-colon).

[Aeryn]

Yeah it was overflow-y: auto;

It didn't seem to change anything at all unfortunately ):

[Virgil Sovereign]

Jul 14, 2017 16:40:09 GMT -8 Aeryn said:

Yeah it was overflow-y: auto;

It didn't seem to change anything at all unfortunately ):

Did you remove overflow: auto;? If you added overflow-y: auto; without removing the existing property, this would account for the ongoing problem.