How to Create Your Own Picture Scroll Box

Written by kevin pahlau
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create Your Own Picture Scroll Box
Add a scroll box to your website using HTML. (mouse image by Dušan Zidar from

Many websites feature a photo gallery where multiple pictures can be displayed on a single page. There are several ways to present a picture gallery. One way to show pictures would be to include them inside a scroll box. Visitors can view each picture in the collection by selecting the scroll bar and moving it in the direction they would like. Using HTML code, you can create a picture scroll box to display various images.

Skill level:

Things you need

  • PC or Macintosh computer
  • Knowledge of HTML
  • One of the following: Notepad (PC), TextEdit (Mac) or Dreamweaver 8.0 or higher

Show MoreHide


  1. 1

    Create a blank page using HTML code. The code should include all essential elements like the HTML, head, title and body tags. An example is shown below. If the picture scroll box is a feature to be incorporated into an existing page, this first step can be skipped.



    <title>Title of Document</title>





  2. 2

    Now that the page is created, there will need to be an area designated for the picture scroll box. To do this, create a table within the body tags of the HTML code.

    <table cellspacing="2" cellpadding="0">






  3. 3

    The table needs to be a particular width. For this example, the width will be 400 pixels. Designate the width in the top table tag as it is shown below.

    <table width="400px" cellspacing="2" cellpadding="0">

  4. 4

    With the table created, the picture scroll box now has an area to reside in. Now the scroll box needs to be made. Creating div tags, make the area for the picture scroll box. Designate the height and width for the scroll box.

  5. 5

    Another style must be added to create the scroll feature. Type the style "overflow:scroll;" inside the div tag next to the width and height settings. If you prefer not to include a border, type "border: no border". The new style features of the scroll box should look like the code below.

    <div style="height:250px;width:400px; overflow: scroll; border: no-border;"> </div>

  6. 6

    Images need to be added to make the picture scroll box complete. If an image folder does not already exist for your website, create one. Take images that will be placed into the scroll box and edit them with a photo-editing program. Keep in mind not to have the images larger than the total width of the scroll box. Here, images would not be any larger than 400 pixels.

  7. 7

    Create an image tag inside the <td> </td> tags. Place as many images as you would like and include one or two break tags between each image. This will create space between the images. An example of the image code is shown below.

    <img src="your image name goes here" />

    <img src="your image name goes here" />

  8. 8

    Once all images have been placed, the picture scroll box is completed. An example of the finished table code is shown below.

    <table width="400px" cellspacing="2" cellpadding="0">



    <div style="height:250px; width:400px; overflow: scroll; border: no-border;">

    <img src="your image name goes here" />

    <img src="your image name goes here" />





Tips and warnings

  • Additional styles can be added to the picture scroll box. The styles featured above contain only the basics.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.