HTML, XHTML, and CSS Bible, Fifth Edition

Chapter 34. CSS Layouts

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.

Understanding CSS Positioning

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.

Note

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

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;

Note

Several styles have been inserted for consistency throughout the examples in ...