Graphics Programs Reference
In-Depth Information
142
Figure 4-35: Visualizing the layout needs within the two main columns.
Okay, now turn those into some CSS.
#main
h2
{
width
:
575px
;
padding-left
:
140px
;}
#main
.info
{
float
:
left
;
width
:
95px
;}
#main
.text
{
float
:
right
;
width
:
575px
;}
You'll note that I didn't dei ne anything for the separation between
.info
and
.main
. h at's
because they're l oating in dif erent directions, so we can rely on them to keep separated
simply by running away from each other. Now we divide all those pixel lengths by 715 pixels,
which is the
width
of
#main
. h at yields the following CSS, which will result in the screen
shown in Figure 4-36.
#main
h2
{
width
:
80.4196%
;
padding-left
:
19.5804%
;}
#main
.info
{
float
:
left
;
width
:
13.2867%
;}
#main
.text
{
float
:
right
;
width
:
80.4196%
;}
Search WWH ::
Custom Search