Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
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.


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.


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.

  • + Share This
  • 🔖 Save To Your Account