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

138

Figure 4-31: All three columns properly in place.

Note that the same ef ect would have been possible with an of set of left: -13em; .

And that's really all there is to it. We just pull the secondary columns over the top of the
container's padding, and all is right with the world. Of course, if we apply margins and
padding to the columns, then there's more math to do, but the principle remains the same.

For example, suppose we want to push the side columns a bit apart from the content. h at
could be accomplished by reworking the center column to use a combination of borders and
padding.

.contain { padding : 0 2em ; border : 1em solid white ; border-width : 0 15em 0 13em ;}

Notice that now we have great big fat borders on the sides. h at is what's holding open the
spaces for the two columns. h e padding on the element will push its content inward even
farther, and thus away from the side columns.

h is means that we have to adjust the placement styles for the side columns. For the second
column—the let most in this example—we just increase the right value to be the width of
the column (also the width of the center column's let border) plus the let padding of the
center column.

.two { width : 13em ; margin-left : -100% ; right : 15em ;}