HTML, XHTML, and CSS Bible, Fourth Edition

Chapter 34. CSS Layouts with Floating and Positioning

IN THIS CHAPTER

• Understanding CSS positioning

• Specifying 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 discusses 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. The method you use depends on what you want the position of the element 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.

Static positioning

Static positioning is the normal positioning model — elements are rendered inline or within their respective blocks. 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 this section. A border and background have been added to the element to enhance the visibility of the element's scope and position. The element also has two positioning properties (top and left), although they do not affect the static positioning model.

Figure 34-1. Static positioning is the normal positioning ...