HTML and CSS

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 tutorial, 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 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.

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 this table.

Browser Support for CSS Layouts in This tutorial

Browser                 OS              Version
------------------------------------------------
Internet Explorer       Windows         6.0
Mozilla                 All Available   1.x+
Netscape                All Available   6.x
Firefox                 All Available   All
Opera                   All Available   6.x
Safari                  Macintosh       1.x+

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.