Dreamweaver CS5: The Missing Manual

Absolute Positioning

Beyond float-based layouts, CSS’s other main technique for placing elements on a page, absolute positioning, lets you specify an exact position on a page for any element. But before you start thinking you’ve found page-layout heaven, keep in mind that the Web is a fluid environment that’s difficult to control with pixel-level precision. If a visitor increases the font size in her browser, the enlarged text may spill out of your carefully crafted layout. In addition, it’s nearly impossible to force a footer to the bottom of a page laid out using absolute positioning (a trivial task with float-based layouts). That’s why most CSS Layouts use floats and the techniques discussed at the beginning of this chapter.

Note

Dreamweaver refers to absolutely positioned divs as either AP Divs or AP Elements, AP meaning absolutely positioned. Any tag can take advantage of CSS positioning, but you’ll most often apply positioning to a <div> tag that contains text, images, or other content. In this book, the term AP Div refers to any absolutely positioned div. However, because you can absolutely position any tag (a link, unordered list, or even a simple paragraph), you’ll see the term AP Element used to describe any tag that’s absolutely positioned.

That’s not to say you shouldn’t use absolute positioning. It’s great for moving small elements, like a logo, image, or short set of links, to a specific position on a page; and it’s the only way to have one element overlap another element ...