Coronavirus (COVID-19) information: All courses at all locations are available as live online classes. Limited in-person classes in some locations. Our offices remain open. Learn more.


Dreamweaver tutorial: Futureproofing your layout in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Futureproofing your layout
  • Pros and cons of Absolutely Positioned CSS layouts

This tutorial provides you with a foundation for working with Adobe Dreamweaver layout. It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Futureproofing your layout in Dreamweaver

Absolutely positioning the elements of your page layout is very stable and reliable, but it also has some fundamental limitations. You have already seen what happens when there is more content than can fit inside a box: the box overflows resulting in unattractive content. You have also seen one solution, which is simply to expand the size of the box. Even this is not an ideal solution though. Content on the web changes constantly; text is added and removed, images are inserted and so on. The designer of the page may have little or no control over this, especially if they are handing a web site off to a client who will eventually be updating and modifying the site.

To help strengthen your layout for future modification you can use a CSS property called overflow. This will help you prevent the worse-case scenario of text that breaks your layout as it overflows its container. For this exercise, you’ll apply overflow to the Members Benefits sidebar.

1 Click on the bottom edge of the sidebar and then drag the bottom of the box upwards until half of the list items are overflowing out of the box.

Text that is overflowing over the sidebar

2 Double-click the #sidebar style in the CSS Styles panel and then click on the Positioning category.

3 Click on the Overflow menu and choose auto. This automatically adds scrollbars to any <div> element that has more text than can fit inside. Click OK. You will see in Dreamweaver’s design view that the box has snapped to fit the original height.

4 Choose File > Save, then File > Preview in Browser. Your div now has a scrollbar. While it may not be an ideal solution if you do not like scrollbars, at least it doesn’t break the layout. Close the browser and return to Dreamweaver.

These tutorials are created by and the team of expert instructors at American Graphics Institute.