Hello again. So, now that I'm no longer following any of the plans I have previously made for this tutorial thread, I might as well go over random things. In this case, scrollable text boxes! I apologize if this isn't what you guys wanted, but no one said anything about what they wanted to see next, so... yeah.

A lot of people have already messaged me asking how I make scrollable text boxes, so I decided that this is a good topic to 'teach.' This is my way of making a scrollable text box, so sorry if it's not the way you make one? Anyways, I'll just go ahead and start.

Scrollable text boxes have three parts: the text box, the scrollable part, and the second box(?). Together, these all make a pretty scrollable box, either with a hidden, thin, or large scroll bar. First, we'll learn how to make a basic scrollable text box.

Basic Scrollable Text Box

Before making the actual scrollable text box, remember the last tutorial? That's right, I will use the base code to start off with this 'basic scrollable text box' code.

< div style="width:300px;margin:auto;" >
< div style="width:210px;height:160px;padding:20px;float:left;border:1px solid #EEE;" >
< div style="font-family:calibri;font-size:10px;color:#222;text-align:justify;text-transform:uppercase;line-height:11px;" >
< p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.< /p >
< /div >
< /div >
< /div >

The second div of this code is the 'text box' of my code, so there is no need to make another box.

Before moving on to the next part of this code, here's a mini tutorial on borders.

Here's what we have so far:

Now I will add the 'overflow:auto' to the 'text box' of my code, and it will look like this:

Behold, the text no longer flows out of the box! But there's that scroll bar... (It doesn't really look bad in this case, but let's pretend it looks hideous in order to go on with this tutorial.) It looks horrible! Let's get rid of it.

Hidden Scrollbar Text Box

In order to 'remove' the text box you will need two more divs. Well, I use two more, at least. I'll use the same code from above and will bold the new divs.

< div style="width:300px;margin:auto;" >
< div style="width:210px;height:160px;padding:20px;float:left;border:1px solid #EEE;overflow:hidden;" >
< div style="width:250px;height:160px;float:left;overflow:auto;" >
< div style="width:210px;float:left;" >
< div style="font-family:calibri;font-size:10px;color:#222;text-align:justify;text-transform:uppercase;line-height:11px;" >
< p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.< /p >
< /div >
< /div >
< /div >
< /div >
< /div >
 

Okay, so here you can see the two new divs I added, as well as the change in overflow (from auto to hidden) in the second div.

In order to remove the scrollbar, we need to add the 'overflow:hidden' to our 'text box.'

Then, we need to add another div with a width 40px larger than the original text box with an 'overflow:auto.' The reason of this is because the scrollbar's width is 20px and the padding is 20px, therefore the div needs to be 40px greater in order to push the scrollbar out of view.

Now the next div brings back the original width of our text box in order to let the box's contents to be viewed properly, as if the scrollbar wasn't there.

Our box now looks like this:

Ta-da! There is no longer a scrollbar!

Thin Scrollbar Text Box

But, what if you want a thin scrollbar? Well, just change the width of the third div to something a bit smaller (about 7px smaller).

< div style="width:300px;margin:auto;" >
< div style="width:210px;height:160px;padding:20px;float:left;border:1px solid #EEE;overflow:hidden;" >
< div style="width:243px;height:160px;float:left;overflow:auto;" >
< div style="width:210px;float:left;" >
< div style="font-family:calibri;font-size:10px;color:#222;text-align:justify;text-transform:uppercase;line-height:11px;" >
< p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.< /p >
< /div >
< /div >
< /div >
< /div >
< /div >
 

And it will look like this:

Now for a free base code:

USERNAME

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

That's about all I have for this tutorial. If you have any questions or tutorial requests, don't be afraid to drop down a comment below or pm me about it. Until next time. ^^