Scrolling box | help me please

Hi! I need help creating scrolling boxes for my den description. I've seen lots of other dens with cool scrolling boxes and I'd really like to be able to do that. I'd really appreciate if someone could help me, thanks! 

I’m not sure how familiar you are with HTML, but what you’ll want to do is create a div (invisible box), style it with a CSS class, and add the property overflow: auto; alongside a maximum height. Details here; do not use overflow: scroll unless you want scrollbars to appear no matter what, even if there’s not enough content to fill the box!

That assumes a base familiarity with HTML/CSS; if you want a more comprehensive breakdown, let me know :>

So if I wanted this in my den description, would I input this code where I edit my den description or where I edited the CSS of my den?

HTML/den description code view:

<div class="box">scrollable content goes here</div>

CSS (shown without indentation because forum formatting doesn’t like that, but it’s not important anyway):

.box {max-height: 100px; overflow: auto;}

I used max-height instead of height because the latter makes the box that size exactly no matter what, whereas max-height sets its maximum size. (This also assumes you want a vertical scrollbar; for horizontal scrolling, set a max-width instead.) The value (100px) can be whatever you want, as can the class name (box).

Last question, sorry; If I wanted to have one on the left side and one on the right, how would I be able to do that?

No need to apologize, I’m happy to help!

There are multiple ways to make side-by-side boxes; the easiest is probably* to make multiple divs of the same class, set their width to <50% (less than, to account for margins), and add the property display: inline-block. Demo here under navigation links; it doesn’t specify a width but the functionality is the same.

*Haven’t tested this out myself and the design you have in mind might call for something else, but this should be a good all-purpose solution. I believe it also scales automatically on mobile/thin browsers but I’m not 100% sure on that, can give it a test run if you want

Thank you so much!! This was very very helpful <3

No problemo! One last tidbit, on aligning the boxes left and right: the float: right is making them both stick to the right side of the page, with the first (Wishlist) taking priority (hence why Breeding Goals is on the left despite coming second in code). You can fix this by making the first box float: left; you can either give it an additional class (multiple classes are separated by a space, like <div class="box first">) or stick the new property right in your inline CSS (everything inside style="") ;>

Thank you so much!!!! You solved my problem :D Wow you are amazing! <3

sorry to pop in but how exactly would you put it together? I've been trying to do something like that with my den for like a solid thirty minutes and I'm just very confused. How do you use the CSS in the HTML/layout?