IN THIS CHAPTER
Understanding CSS Positioning
Specifying the Element Position
Floating Elements to the Left or Right
Defining an Element's Width and Height
Stacking Elements in Layers
Controlling Element Visibility
In the various chapters within this part, you have seen how dynamic documents can be when formatted with CSS. This chapter describes how you can position elements to create various page layouts using CSS properties.
There are several ways to position elements using CSS. Which method you use depends on what you want the element's position to be in reference to and how you want the element to affect other elements around it. The following sections cover the three main positioning models.
It is important to include a valid DTD within documents using positioning. Without a valid DTD the browser might be prone to slipping into quirks mode and refuse to position your elements properly. For more information on quirks mode, see
www.quirksmode.org. For more information on DTDs, see Chapter 1 of this book.
Static positioning is the standard positioning model—elements are rendered inline or within their respective blocks as normal. Figure 34.1 shows three paragraphs; the middle paragraph has the following styles applied to it:
width: 350px; height: 200px; border: 1pt solid black; background-color: white; padding: .5em; position: static;
Several styles have been inserted for consistency throughout the examples in ...