Chapter 15. Floating and 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 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.
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, 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[4]). Block elements stack up on top of one another and fill the available width of the browser window or other containing ...
Get Learning Web Design, 4th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
