positioning elements and left,right,bottom,top

i'm reading through the w3's CSS2 spec trying to figure out how to do fixed
position and am thoroughly confused by the definitions of "left", "right",
"bottom", "top".

here's what i'm trying to do...

---------------------------
|  1.                     |  1. #header (it's 600px wide, 80px tall)
|                         |
---------------------------
|  2.                     |  2. #menu (it's 600px wide, 20px tall)
---------------------------
|  3.            |  4.    |  3. #content (it's 450px wide, auto height)
|                |        |
|                |        |  4. #slogans (it's 150px wide, auto height)
|                |        |
|                |        |  (3&4 total 600px wide)
|                |        |
|                |        |
|                |        |
|                |        |
|                |        |
---------------------------
|  5.                     |  5. #credits (it's 600px wide, auto height)
|                         |
---------------------------


here's the CSS that i have. when i try this, #4 doesn't even appear on the
page. does #4 or #5 need to be "relative" position instead of "fixed"?

#header  { position: fixed; width: 600px; height: 80px; top: 0px; right:
0px; bottom: auto; left: 600px }
#menu    { position: fixed; width: 600px; height; 20px; top: 80px; right:
0px; bottom: 100px; left: 600px }
#content { position: fixed; width: 450px; height: auto; top: 100px; right:
0px; bottom: auto; left: 450px }
#slogand  { position: fixed; width: 150px; height: auto; top: 100px; right:
45px; bottom: auto; left: 600px }
#credit  { position: fixed; width: 600px; height: auto; top: auto; right:
0px; bottom: auto; left: 600px }


could someone clarify the definitions of left, right, bottom, and top? the
definitions in question are found at 9.3.2
(http://www.w3.org/TR/REC-CSS2/visuren.html#position-props) or page 104 of
the PDF version.

Received on Saturday, 17 June 2000 17:06:39 UTC