Dreamweaver CC: The Missing Manual, 2nd Edition

Chapter 10. Choosing a Page Layout

Web design isn’t, unfortunately, like most other forms of graphic composition. For magazine and book projects, programs like Adobe InDesign let you place text and images anywhere you want, and even rotate and overlap them. But web designers are stuck with the basic technology of HTML, which wants to flow content from the top of a browser window to the bottom, in one long column. To place elements around the page and create multiple columns of content, you need to resort to some fancy footwork, and that’s where this chapter comes in.

For much of the Web’s short life, designers have used the HTML <table> tag to control the position of elements on a page—to create columns, sidebars, banners, and so on. But the tag was intended to display information in spreadsheet-like format, and bending it to a web designer’s vision often resulted in complex HTML that downloaded slowly, displayed sluggishly, and challenged coders.

Now that CSS-friendly web browsers like Internet Explorer, Safari, Firefox, Chrome, and Opera rule the Web, designers can safely rely on a much better (though sometimes frustrating) method of page layout: Cascading Style Sheets. That’s right, not only is CSS great for formatting text, navigation bars, images, and other bits of a web page, but it also has all the tools you need to create sophisticated designs, like the ones in Figure 10-1.

CSS provides a couple of ways to control the placement of elements on a page. The most common is to create ...