Learning Web Design, 6th Edition

Chapter 16. Floating and Positioning

16

Floating and Positioning

In this chapter

Floating elements to the left and right

Clearing floated elements

Containing floated elements

Creating text-wrap shapes

Relative positioning

Absolute positioning and containing blocks

Fixed positioning

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

In this chapter, we’ll look at floating and positioning, the CSS methods for breaking out of the normal 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. These features are used less often now that we have Flexbox and Grid Layout, but they are still useful tools worth knowing about.

Before we start moving elements around, though, let’s be sure we’re 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 (see Note). 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 (for right-to-left reading languages such as Arabic and Hebrew, the normal flow is ...