HTML and CSS [Electronic resources] نسخه متنی

Chapter 13. CSS Layouts

The past few years, people have sought a means to transcend all the problems related to table-based layouts and use CSS specifically for managing the visual layouts of their designs. In this chapter, you get a chance to work with the primary types of layouts in CSS that are typically used to achieve a range of design. Some of these layouts are based on positioning schemes, which you explored in Chapter 12, "Positioning, Floats, and Z-index." Some of the layouts use floats, which, you'll recall, are not a positioning scheme but do enable you to create columnar layouts. The combination of floating and positioning is common as well, and you'll get to see examples of that in action.

NOTE

For the purposes of clarity, I'm going to teach you how to create these designs in their most pure form. This means that I'm leaving out a number of popular hacks that might be necessary for you to implement, depending upon your browser base. Without the hacks, these designs will work very well in the browsers described in Table 13-1.

All contemporary browsers in use will have no trouble with these layouts. The need for hacks or workarounds comes in when you have to support browsers outside this list, particularly Internet Explorer versions 5.0 and 5.5 for Windows, all IE versions for Macintosh, and Netscape earlier than 6.0; all have incorrect or partial implementation of the portions of CSS required.