How to Create a Horizontal Scroll in Dreamweaver


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.

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

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

  • 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.

  • 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.

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

Related Searches


  • Photo Credit Stockbyte/Stockbyte/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!