How to Put Scroll Boxes on a Page
We need scroll boxes because monitors have limitations. If there is 20 inches of content available, but your monitor is only 12 inches tall, you are going to need to scroll to see the entire content. You view a scroll box every time you open a browser to visit a site online or to modify a document in most software. There are also situations where you will need to put a smaller scroll box full of information on a web page and you can do so with simple HTML code.
Other People Are Reading
Instructions
-
-
1
Open the HTML file of the page you are adding the scroll bar to and go to the "body" section (between the <body> tags). Choose the area where you want to add the scroll box to your page.
-
2
Type in a <div> tag. This will allow you to create a special area in your webpage for the scroll box. Type in the following code: <div style="overflow: auto; width: 452px; height: 476px">.
-
-
3
Change the "width" and "height" numbers to your desired size for the scroll box.
-
4
Type "scroll" instead of "auto" if you want a scroll bar to show on the side of the scroll box no matter what. When you type "auto," the scroll bar will only appear if it is needed in order to see the entire contents of the box.
-
5
Add "align" as an attribute to your <div> tag if you want to change how the information inside of the scroll box will be aligned. Type in "align=right," or "align=center" (no quotations). For a right alignment, the final tag will read as <div style="overflow: auto; width: 452px; height: 476px" align=right>. The default alignment is to the left, so if you're fine with the text and images lining up to the left of the box, leave this step out.
-
6
Add "position: absolute; left: 108px" to the <div style> tag from the second step if you want to position the entire scroll box further across the page. If you choose this option, the final tag will read as <div style="overflow: auto; width: 452px; height: 476px; position: absolute; left: 108px">. Replace the "108" after the "left" attribute to however many pixels across the page you want to move the box; the higher that number, the further across the page the box will move.
-
7
Type your text as usual or add images to the scroll box (for instance, <img src=yourpicturehere.jpg>) just as you would type HTML code in the standard body of your file.
-
8
Close the <div> tag with "</div>" (no quotation marks).
-
9
Test your updated web page in your browser to see if the scroll box is positioned to your liking.
-
1
