Creating a Website: The Missing Manual, 3rd Edition

Chapter 9. Page Layout

In Chapter 6, you learned about the remarkable CSS standard, and how it can transform the drabbest of pages into a stylish gem. However, you still haven’t seen everything style sheets let you do. Not only can you use them to play with colors, fonts, spacing, and borders, you can also use them to create sophisticated layouts. And with a little planning, style sheets let you create super-flexible pages that you can completely rearrange without touching a line of HTML. Instead, you simply swap in a new style sheet.

In this chapter, you’ll see exactly how the CSS layout properties work. You’ll learn to use modern layout techniques like floating boxes, side-by-side columns, and overlapping layers of pictures and text. But first, you need to take a step back to consider the challenges of layout on the Web and learn why online viewing isn’t as straightforward as it seems.

The Challenge of Screen Space

When you design a page for print, you take into account the physical size of your final document. You’d use much larger text on a poster than on a business card, for example. But in the world of the Web, this system breaks down, because your website visitors can set their monitors to all kinds of screen resolutions, and resize their browser windows to all sorts of different dimensions. These details affect how much screen real estate your web pages have to work with. The higher the resolution and the bigger the browser window, the more of your content fits onscreen. This ...