HTML & CSS: The Good Parts

Key CSS Layout Properties

In order to implement all but the simplest layouts, it becomes necessary to use a number of layout properties that alter the flow of elements within a document. The most functionally useful properties and values are described in Table 3-5 (defaults are in bold). These properties and values will be explained in greater detail in Chapter 6.

Table 3-5. Commonly supported CSS layout properties and values

Property	Values
display	block inline inline-block none
width/height	[length] auto
float	left none right
clear	both left none right
position	absolute fixed relative static
top/right/bottom/left	[length]

The functions of the properties listed in Table 3-5 are described next and shown in Figure 3-1.

Figure 3-1. The use of the float and clear properties changes the relationship between the affected element and the element(s) that follow it

display

HTML specifies that elements exhibit one of several kinds of layout behavior. Normally this behavior is set by the element’s definition in the DTD, but that behavior will correspond to and may be overridden by the value of the CSS display property. inline describes elements that flow without deliberate linebreaks on a (usually) common baseline, and have limited interaction with CSS layout and box properties. block describes elements that are followed and preceded by linebreaks, and expand to fill the entire width of the containing element (unless ...