- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Advanced Page Layout
These CSS1 layout properties provide basic page formatting abilities, but they don't give developers the tools to create complex page layouts. We'll turn to the issue of page layouts in great detail in Chapter 9 (in fact, that's all we cover in that chapter), but here we'll look at the core properties we'll be using to create those layouts, as well as other related properties.
float
As we've seen, CSS can display elements in two ways: as blocks and inline. But in print design, it's very common for text to flow around, for example, images. The float property in CSS1 is designed to enable this. Both inline and block elements can be given a float property, of either left or right, which specifies which side the element floats to. When an element is floated, say to the left, it is taken out of the flow of the page (that is how the page would otherwise be laid out), and then moved horizontally to the left, until it touches the left edge of its containing element, or the right edge of another floating element. Content "below" it in the document—that is content that comes after it in the HTML—then flows around the element. Let's see this in action in figure 4.14. In this example, we've floated the portrait image to the left, and it also has a margin, which is why there's a space between the text and the image.
)
4.14 The image before being floated (top) and after being floated (bottom)
Just as elements can be floated to the left, they can also be floated to the right by using the value float: right. We'll revisit float in detail in Chapter 9, where we'll see how it's used to create multi-column page layouts, among other things.
clear
Sometimes, we don't want an element's content to flow around a floated element. We can stop this by giving the element a clear property of both [4.15]. We can also stop floating on one side of an element while allowing it on another by using clear: left (which still allows floating to the right), and clear: right (which still allows floating to the left).
)
4.15 clear stops floating to one or both sides of an element—here our heading stops the float beside it.