How to Create a Horizontal Scroll in Dreamweaver

Written by matthew weeks
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Horizontal Scroll in Dreamweaver
Horizontal scroll bars are useful if you want to contain a block of content within a certain space on your Web page. (Stockbyte/Stockbyte/Getty Images)

One element of Adobe Dreamweaver that can be useful if you don't have any experience with hand coding HTML is the automatic highlighting of objects in the source code when you click on them in the design interface. Using this feature, you can easily determine which tags you should edit if you want to apply visual effects and HTML styles, such as adding a horizontal scroll bar to a DIV container.

Skill level:


  1. 1

    Open the document with the container you wish to add a scroll bar to in Dreamweaver.

  2. 2

    Hover over the container with your mouse until you see the red outline denoting its boundaries.

  3. 3

    Move your mouse to the source code of the document and find the beginning of the highlighted section. This is the tag you need to edit.

  4. 4

    Add the following code inside the container's tag:

    style="width:XXXpx; height:XXXpx; overflow-x:scroll; overflow-y: hidden;"

    Substitute your preferred height and width in pixels for the two instances of "XXX." This will fix a height and width for your container and add a horizontal scroll bar to it that will appear when the content inside it exceeds the ability of the container to display it. It will prevent a vertical scroll bar from appearing.

  5. 5

    Save and publish your page. Tweak the height and width values as necessary to get the appearance you desire.

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.