Scrolling Div Demo

There are several ways to make text scroll on part of your page:

• The simplest is probably to use a DIV with a fixed height and with the CSS setting "overflow:auto" as demonstrated on this blue box. Result: users will see a scrollbar next to the div.
• You can use id anchor tags to link within your scrolling text, like this: Go to end.
• A change of border, a box-shadow, or background color -- as used on this box -- may make the space more attractive. (See the code to figure out how.)
• OR -- You can use absolute or fixed positioning on one div, and the rest of the page will scroll while it stays put.
• OR -- You can use an iframe of a fixed height and width, and fill it with the address of another page. (The iframe tag also is how most current video player codes work, as provided by sites like Vimeo and YouTube.)
• Read the HTML of this page to see how the simple "overflow" approach works.

This page shows the "overflow" technique. This blue box has a fixed height of 300 pixels. I've put the CSS styles in-line so it is easier to see their relationship in the code. On a professional-looking page, the styles would be attached to a "class" in the page's stylesheet, and the divs would use that class names.

The rest of this page is lorem ipsum filler.

quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat...

quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat...

This is the end of the scrolling text. Go to the top of the box.