Making Scrollable Textboxes

I've been seeing this around lately, thought some of you might be wondering how it's
done. and tbh it's really simple. ^^

I'm going to assume you know how to make a text box, so I won't be covering that in this tutorial.
If you do not know how to make a textbox, you can refer to Chapter 8

Begin by making a simple textbox with whatever size and codes you wish to apply to it (eg. border, padding etc)
For simplicity sake of this tutorial, I will use a very basic textbox without the customisation. My textbox is

Example:
< div style="background-color: #FF9CA2; width:200px; height: 100px;" >

Now if I wrote a lot in this box, it obviously would not fit and would actually just spill out of it which does not look professional at all. Therefore to fix this, we can add the scroll feature to this simple box. All we have to do and add this to our code: overflow: auto;

Example:
< div style="background-color: #FF9CA2; width:200px; height: 100px;overflow: auto;" >

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.

Right now, it doesn't look any different and even if we wrote in it, it would look the same - until your text comes to the point that it would be longer than the height. For example, the height of my box is 100px. If I wrote a whole paragraph in this box that exceeded 100px, the scrollbar would now appear and the viewer would be able to scroll to read the rest of the text.
You can put anything into the scroll box, really. It's actually not any different from a regular textbox. You can put links, pictures, text etc in it. So shall we see our end product?

Please note that I have slightly changed the format of my text in the textbox. I'd recommend playing with your text heights as well in order to keep the text looking clean. (I have not done this, again, to keep this code as simplistic as possible for the sake of this tutorial). Please also take note that I have also added padding to my scroll box. This is so the text isn't squashed up right to the edges of the box and leaves a bit of space. I think it just looks neater and professional. If you add padding, you must keep in mind that it will expand your box. Therefore, to retain the original size of your box you must minus your padding from your actual dimension in order to keep the original size. For example, my box was 200px wide and 100px in height and I've added 10px padding. Due to this, I have removed 20px from the width and height of my box in order to keep the dimensions remaining at 200x100. The padding is pretty much a border around your original box - so if you think of it that way, perhaps you'll understand what I mean. So below is my final code:

< div style="background-color:#ff9ca2;width:180px;height:80px;overflow:auto;padding:10px;" >< span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan congue neque, a posuere nulla posuere vel.< br / > Donec dapibus lectus eu justo accumsan, nec sodales nibh sollicitudin. Maecenas eget massa vel sem sagittis molestie et eget lectus. Morbi ultrices elementum semper. Nulla et laoreet eros, ut porttitor ligula. Nullam sapien sapien.< /span >< /div >