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

h e basic idea is exactly the same. It's just a matter of making sure there's enough room on the
let to accommodate the column that's meant to go there, and then pulling that column
let ward by the appropriate amount.

Oh, and you can l ip all this around to go rightward as well:

.column { float : right ; padding : 0 20px ; margin : 0 20px ;}
.two , .three { width : 200px ;}
.one { width : 300px ; margin-right : 320px ;}
.two { margin-right : -640px ;}

You aren't limited to three columns, either. If you have four, i ve, or even more columns, you
can rearrange them into pretty much any order you like. It gets more complicated as the
number of columns increases, of course, but if it were easy anyone could do it, right?

Of course, if you want to center your columns in the browser window, you will need a
container around the columns. Something like this:

.contain { width : 1000px ; margin : 0 auto ;}

< div class="contain">
< div class="column one">...< / div>
< div class="column two">...< / div>
< div class="column three">...< / div>
</ div>

134

As I said earlier, pixels were used in this tip because they make the math a little easier to
understand. h e technique does not, however, depend on pixels. You can do the same thing
with percentage-based columns (see Figure 4-28) for that l uid feeling:

column { float : right ; padding : 0 2.5% ; margin : 0 2.5% ;}
.two , .three { width : 20% ;}
.one { width : 30% ; margin-right : 32.5% ;}
.two { margin-right : -70% ;}