How to Make a Separate Scrollbar in Dreamweaver

Web pages that contain more information than will fit on a screen automatically include vertical or horizontal scroll bars. Dragging these scroll bars allow you to move up/down or left/right through a page's content. However, Dreamweaver also allows you to include separate scroll bars within a specific portion of a page. Dragging these scroll bars navigate through only a section of content without affecting the entire page. The feature is available using simple HTML coding in Dreamweaver's Code or Split View mode.

Instructions

1. Open your HTML page in Dreamweaver.

2. Click "Split" at the top left of the window. This enables the Split View mode, which displays code in the left pane and design content in the right pane.

3. Click and drag your mouse across the design content you want scrollable. Doing so highlights the applicable code in the left pane. Make a mental note where the highlighting ends; once you begin editing in the left pane, the highlighting disappears.

4. Type the following code immediately before the highlighted code in the left pane:

   <div style="overflow: auto; width:200px; height:200px">

   Change the width and height measurements to whatever size you want. The example code creates an invisible box that measures 200 by 200 pixels. Your content will be displayed in this box. If more content is present than can fit within the box, scroll bars automatically appear.

5. Type "</div>" without quotes immediately after the previously highlighted text in the left pane.

6. Click anywhere in the right pane, and you can see the content confined to the content box you created.

7. Save your page and upload it to make your changes live.