Beginning CSS: Cascading Style Sheets for Web Design, Second Edition

Chapter 8. CSS Buoyancy: Floating and Vertical Alignment

In Chapter 7, I presented a subset of properties that combine to define a concept known as the CSS box model. In this chapter, I continue introducing new properties, this time focusing on two properties most often misunderstood by users new to CSS design: the float and clear properties. These properties are often misunderstood because of their unique effect on the elements in a document. In this chapter I discuss:

• The float property and how it is used to change the flow of elements in a document — for instance, to place text beside an image

• The clear property and how this property is used to cancel the effects of the float property

• The vertical-align property and how this property is used to control the vertical alignment of text to create subscript or superscript text or control vertical alignment in table cells

The next section begins the discussion of the float property.

The float Property

A simple explanation of the float property is that it is used to put content side by side. In the coming sections, you look in depth at the float property, its idiosyncrasies, and how you can use it to lay out a web page. The following table outlines the float property and its possible values.

Property	Value
float	left | right | none Initial value: none

At this point, the float property appears fairly simple. It accepts keyword values of left, right, and none. The effects of the float property are intrinsically tied to the CSS box model. After the ...