LAYOUTS - CSS: Professional Techniques for Modern Layout - page 130

Figure 4-25: Floating the three columns.

132

All right, now let's assume that we want the i rst column in the middle, the second on the
right side, and the third on the let side, as depicted in Figure 4-26. h at requires two more
rules.

.one { width : 300px ; margin-left : 300px ;}
.three { margin-left : -920px ;}

h at's it. h at's the whole thing.

How does it work? Well, the let margin on the i rst column pushes it over and opens up a big
blank space that's the same width as the entirety of the third column—content, padding, and
margins—plus the original let margin of the i rst column (which was 20px ). With that ready,
the let margin of the third column pulls it let ward past the preceding two columns and drops
it over the top of the let margin of the i rst column. And that's all it takes.

Now suppose we want the second column on the let side and the third column on the right,
thus switching the side columns around (see Figure 4-27). Easy. Keep the .one rule from
before, drop the .three rule, and add this rule:

.two { margin-left : -640px ;}