Creating a Website: The Missing Manual, 4th Edition

Chapter 8. Page Layout

In this book, you’ve covered some serious ground with CSS. In Chapter 3, you used styles to polish up drab web pages. And in Chapter 7, you learned to build larger, more ambitious style sheets to standardize the design of an entire website. In this chapter, you’ll extend your style sheet skills to deal with page layout.

Up to now, your pages have been locked into fixed layouts based on the order of their HTML elements. So if you put a heading at the beginning of your markup, that heading shows up at the top of your page. This behavior makes perfect sense, but it doesn’t suit more complicated layouts. For example, a typical modern website uses headers, fat footers, and sidebars (often on both sides of a page) to place major elements like headers, menus, advertisements, links, galleries, social media plug-ins, and more. If you lock each ingredient to a specific spot in your page, you’ll have a hard time replicating the layout on every page and a heck of a time changing your site’s layout in the future.

Once again, you’ve met a problem that styles can solve. With a well-organized style sheet—like the kind you built in the previous chapter—you can carve your page into logical sections, and then use CSS to slip those sections into the right arrangement.

In this chapter, you’ll see exactly how CSS-based layouts work. You’ll learn to use modern layout techniques like floating boxes, side-by-side columns, and overlapping pictures and text. But first, you’ll consider ...