height: 75%; padding-left: 6px; padding-right: 4px; padding-
top: 6px; font-size: 16pt;}
This rule specifies that a <div>should be absolutely positioned within the
browser window at the upper-left corner (0 top offsetand 0 left). As we
say in North Carolina, that thing is slap in the corner— it couldn’t get any
further up or over to the left. It is specified as 100 pixels wide, but notice that
the height is not an absolute value. It is expressed as a percentage of the con-
taining block (in this case, the containing block is the browser). As you can
see in Figure 4-6, the sidebar divon the left side is 75 percent the height of
the browser window.
This is an important point: Remember that you can express both size and
position as relative percentages, even though they are within a style where
the position property has been defined as absolute.
Try running this example and then resizing the browser window to make it
longer. Notice that the browser maintains the 75 percent height ratio between
the divand the browser window.
The sidebarclass also specifies some padding on the left, right, and top. This
is a useful way to keep text or other elements from looking awkward by butting
right up against the edges of a divor other block. Without that padding, notice
how crude the text looks against the background, in Figure 4-7.
Figure 4-7:
Without
padding,
text looks
crude as it
butts up
against the
sides of a
background
block.
78 Part II: Looking Good with CSS
