Learning Web Design, 3rd Edition

CHAPTER 15 FLOATING AND POSITIONING

IN THIS CHAPTER

Floating elements to the left and right

Clearing floated elements

Relative positioning

Absolute positioning and containing blocks

Fixed positioning

At this point, you’ve learned dozens of CSS properties that allow you to change the appearance of text elements and the boxes they generate. But so far, we’ve merely been decorating elements as they appear in the flow of the document.

In this chapter, we’ll look at floating and positioning, the CSS methods for breaking out of the flow and arranging elements on the page. Floating an element moves it to the left or right, and allows the following text to wrap around it. Positioning is a way to specify the location of an element anywhere on the page with pixel precision.

We’ll start by examining the properties responsible for floating and positioning, so you’ll get a good feel for how the CSS layout tools work. In Chapter 16, Page Layout with CSS, we’ll broaden the scope and see how these properties are used to create common multicolumn page layouts.

Before we start moving elements around, let’s be sure we are well acquainted with how they behave in the normal flow.

Normal Flow

We’ve covered the normal flow in previous chapters, but it’s worth a refresher. In the CSS layout model, text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right (in left-to-right reading languages*). Block elements stack up on top of one another and ...