Scrolling Area

Scrolling Area

This is a scrolling area created using the CSS property overflow: auto.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

There may be times when you want to have a scrolling area on a page. Look at the example to the right. It is not an iframe, it is a <div> element with a specified width and height, floated to the right with overflow: auto to insert a scrollbar. Here is the CSS:

div.scroll {
height: 200px;
width: 300px;
float: right;
display: inline;
overflow: auto;
border: 1px solid #666;
background-color: #FDF5E6;
padding: 8px;
font-size: 70%;
}

I think most of the CSS code is self-explanatory, but display: inline probably deserves some additional explanation. Most HTML elements are either block elements or inline elements.

Block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Block elements always begin on a new line, their jeight, line-height and top and bottom margins can be manipulated, and their width defaults to 100% of their containing element, unless a width is specified.

Inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>. Inline elements may only contain text and other inline elements, and inline elements do not usually begin on a new line.

There may be times when you want a block element to display inline and vice versa. In the example above, I wanted the scrolling text area to display to the right of the text. so I used display: inline so that the <div> would display inline. Conversely, you might want an inline element to start on a new line, so you could use display: block.