untitled

What would happen if you left the maintextclass at 110 pixels left, but

expanded the size of the sidebar class to, say, 130 pixels? Every group always

has a joker who wants to see what happens if he violates spaces. Go ahead

and try it. The division called maintext(which comes after the sidebar in

the HTML) covers up part of the sidebar and part of the sidebar’s text. You

cancreate cool effects by manipulating overlapping blocks and adjusting

their opacity (so you could still see the text in the sidebar), but I get to those

tricks later.

Notice that with the maintextclass, you defined both its height and width

as relative. Both the width and height are 75 percent, but the width is com-

promised if the user adjusts the width of the browser window because the

browser has to make allowances for displaying the sidebar with its absolute

width.

The third style defined in the header of the preceding code specifies an image

with an entirely relative location within its containing block. Unlike the div

elements, which are contained by the browser itself, the image is contained

within a div. So the position of 35 percent left means that the left side of the

photo is positioned at about one-third of the width of the maintext div, and

at 20 percent, or about one-fifth, down from the top of the div. You can see

these offsets in Figure 4-6.

img.relative {position: relative; left = 35%; top = 20%}

80 Part II: Looking Good with CSS

CSS units of measurement

You can specify top, left, height or width with the

following units:

px:pixels, the smallest unit on a display —

the dots of colored light that you can some-

times see if you get close enough to a TV

pt:points, 1/72 inch. Normally this is a type-

face measurement

pc:picas, 1 pica = 12 points

mm:millimeters

cm:centimeters

in:inches

em: A measurement of the approximate font

size of the current element

ex:the x-height (the height of a lower-

case x) of the font of the current element —

usually about 1/2 the size of em

For relative size or position, use %for percent.

Units of measurement are covered in detail in

Chapter 6.