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

will all be padding just in case we ever want to set background colors. Further, we'll split the
dif erence between the space between the two.
In pixels, that would yield:
#contain { width : 1010px ;}
#main , #extra { float : left ;}
#main { width : 715px ; padding : 20px 35px 20px 25px ;}
#extra { width : 190px ; padding : 20px 10px 20px 35px ;}
But remember, we're dividing all these by 1,010 pixels. h at ends up as (see also Figure 4-34):
#contain { width : 1010px ;}
#main , #extra { float : left ;}
#main { width : 70.792% ; padding : 1.98% 3.465% 1.98% 2.475% ;}
#extra { width : 18.812% ; padding : 1.98% 9.9% 1.98% 3.465% ;}
141
Figure 4-34: Placement of the two main columns of the layout.
Yes, you're leaving the container alone for the moment. It will keep things controlled while
you assemble the layout, to make sure things are landing where they're supposed to go.
Now look at the measures of the things inside #main (see Figure 4-35).