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

We'll return to the position: relative; in a bit. For now, we set the widths of the
secondary columns and pull them into place (see also Figure 4-30).
.two { width : 13em ; margin-left : -100% ;}
.three { width : 15em ; margin-right : -15em ;}
137
Figure 4-30: One column in place, the other overlapping.
Well … almost. h e problem is that the let column is in the wrong place, overlapping the
main column. h at's because it was pulled all the way across the container from right edge to
let edge. To get it into place, we need a little more.
What we need to do is shove the let column farther (see Figure 4-31) to the let by a distance
equal to its own width. And that's where the position: relative; comes in. We're going
to give the column a right of set equal to the distance it needs to travel, which happens to be
its own width.
.two { width : 13em ; margin-left : -100% ; right : 13em ;}