Scrolling Windows in HTML

HTML code lets you create scrolling windows on your website.

A scrolling window, or box, on your Web page enables you to present a lot of content in a predefined container so the user can click and drag the scroll bar to view all of the information. The HyperText Markup Language (HTML) <div>...</div> tags give you the ability to create these windows, and combined with Cascading Style Sheets (CSS) you can customize the box to your liking. You can use the text editor software that comes with your computer to code your scrolling windows in HTML.

Instructions

1. Start your text editor software and open the HTML file where you want to include the scrolling window.

2. Position your cursor in the page where the window needs to display and type in the "<div></div>" tags without quotes. Enter "<p></p>" tags without quotes between the <div> and </div> tags and type the content that you want to appear in your window between the paragraph tags as in the following example:

   <div>

   <p>This is the content that appears in the window.</p>

   </div>

   Make sure you enter multiple lines of text to ensure the scroll bar automatically appears.

3. Type "style=" without quotes in the first <div> tag and follow this with "overflow: scroll; width: 330px; height: 250px;" -- including quotes this time -- as in the following:

   <div style="overflow: scroll; width: 330px; height: 250px;">

   The "overflow: scroll" attribute further instructs the browser to make the window scroll. Additionally, enter the desired measurement values for both "height:" and "width:" attributes for your window in pixels (px).

4. Save your file. Your finished scrolling window code looks like this if you used a "width:" setting of 330 pixels and a "height:" setting of 250 pixels:

   <div style="overflow: scroll; width: 330px; height: 250px;">

   <p>This is the content that appears in the window.</p>

   </div>

Tips & Warnings

• Preview your file in a Web browser to ensure the scrolling window appears successfully. Adjust your "width:" and "height:" measurements if needed.

References

• W3Schools.org: HTML <div> Tag
• W3Schools.org: CSS How To
• W3Schools.org: CSS Overflow Property

Resources

• quackit.com: HTML Scroll Box
• tizag.com: HTML - Div Elements
• htmlite: How Do You ... Make a Scrolling DIV Area?