8 Floating and Positioning Elements
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. —Noah Stokes
This chapter covers
- Learning how elements flow down the page
- Interrupting the normal flow by floating elements
- Using floats to create drop caps and pull quotes
- Interrupting the normal flow by positioning elements
Left to its own devices, the web browser imposes an inflexible structure on your web pages, and your site is in danger of becoming boring (at least from a design perspective). To avoid that fate, you need to take control of your page elements and free them from the web browser's fixed ideas about how things should be laid out. You do that by wielding two of the most powerful CSS tools in the web designer's arsenal: floating and positioning. With these tools, you can break out of the browser's default element flow and build interesting, creative pages that people will be itching to visit. This chapter tells you everything you need to know.
Understanding the Default Page Flow
When you add elements to a web page, the browser lays out those elements in the order in which they appear in the HTML file according to the following rules:
- Block-level elements are stacked vertically, with the first element on top, the second element below it, and so on.
- Each inline element is rendered from left to right (in English and other left-to-right languages) within its parent block element.