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

143

Figure 4-36: Properly placing the pieces with percentages.

h ere's a little bit of vertical alignment to be worked out between the columns, but nothing
that a little bit of top margining won't i x in a jif y.

You might wonder: Why do all this math when we had perfectly good pixels? Because now we
can change the width of the container to be anything, and the grid will hang together, with all
the pieces being the correct relative sizes. For example:

#contain { width : 70em ;}

Or even:

#contain { width : 90% ; margin : 0 5% ;}

h e world is now your oyster. If you do this, though, make sure you keep the oyster from
getting too skinny, like so:

#contain { width : 90% ; min-width : 960px ; margin : 0 5% ;}