CSS: The Missing Manual, 4th Edition

Chapter 14. Positioning Elements on a Web Page

When the World Wide Web Consortium introduced CSS Positioning, some designers understandably thought they could make web pages look just like print documents created in desktop publishing programs. With just a couple of CSS properties, CSS Positioning lets you position an element in a precise location on a page—say 100 pixels from the top of the page and 200 pixels from the left edge. Pixel-accurate placement seemed to promise that, at last, you could design a page simply by putting a photo here, a headline there, and so on.

Unfortunately, the level of control designers expected from CSS Positioning never materialized. There have always been differences in how various browsers display CSS-positioned elements. But, even more fundamentally, the Web doesn’t work like a printed brochure, magazine, or book. Web pages are much more fluid than printed pages. Once a magazine rolls off the press, readers can’t change the page size or font size. About the only way they can change the look of the magazine is to spill coffee on it.

Web visitors, on the other hand, can tinker with your handcrafted presentation. They can increase their browser’s font size, potentially making text spill out of your precisely placed and sized layout elements. In addition, since these days people browse the Web using phones, tablets, and even televisions, you can’t predict the dimensions and use them to determine the exact placement of onscreen elements. But ...