How to Add a Scrolling Text Box to Your HTML Page

My webpage was initially looking very unorganized and scattered despite my attempts to divide the text up through images, colors, and sections. This is what the website looked like initially:

I needed a way to consolidate text but still have it visible to the viewer.  The solution: a scrolling text box.

To create a scrolling text box,  add a <div> and then proceed to stylize the text box. All you have to do is choose the width and height of the box (make sure that the text box height is short enough so that you have an overflow of text, allowing the box to scroll down). After you add the height and width, add “overflow:auto” to create the scrolling effect.

Now that you have formatted the text box, you are ready to add your content!

Format the content of the text box just as you would any regular text on your HTML page. Once you have added all of the content you want, close out your </div>. And voila! You have created a scrolling text box and your page will instantly look more organized!

Here is what the finished product looks like on the web:

 

By, Amelia Merritt

~ by ameliaam on February 23, 2014.