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

9

Floating and Vertical Alignment

WHAT YOU WILL LEARN IN THIS CHAPTER:

• 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

In Chapter 8, 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: float and clear. These properties are often misunderstood because of their unique effect on the elements in a document.

I'll begin with a discussion of the float property.

FLOATING CONTENT

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 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 that you read about in Chapter 8 ...