HTML and CSS Reference
In-Depth Information
Part III
CSS Page Layout
Page layout is one of the most challenging aspects of CSS. Unlike print, you don't know in advance what
size screen your web pages will be viewed on. You also have no control over which browser is used. Old,
less capable browsers tend to cling to a significant proportion of market share for many years. CSS3
proposes new techniques, such as Flexible Box Layout (covered in Chapter 22), but until a sufficient
proportion of browsers supports them, you need to stick to the tried-and-tested techniques that work
cross-browser.
Chapter 6 lays the foundation for this part with an in-depth discussion of the CSS box model,
showing how to add whitespace around HTML elements, and explaining the difference between margins
and padding. You'll also learn how width and height are calculated, and how to deal with content that's
too big for its container. This is arguably the most important chapter in the topic.
Chapter 7 introduces the concept of floats, which are used to flow text around images and position
elements horizontally alongside each other. It also shows how to create a two-column layout with a
sidebar.
Chapters 8 and 9 describe how to add backgrounds and borders to elements. You'll learn how to
position background images accurately, as well as modern techniques to add rounded corners and drop
shadows without the need for images or complex markup.
In Chapter 10, you'll learn how to style ordered and unordered lists, and convert an unordered list
into a smart looking navigation bar.
Chapter 11 demystifies the secrets of CSS positioning, a subject that confuses many beginners. You'll
learn how to fix elements within the browser window, and how to lock elements into position using a
combination of relative and absolute positioning.
Rounding out Part III is an extensive review of cross-browser layout techniques in Chapter 12,
showing how to create one-, two-, and three-column layouts using floats and CSS table display.
