W3C home > Mailing lists > Public > www-style@w3.org > June 2000

positioning elements and left,right,bottom,top

From: travis <tlforden@yahoo.com>
Date: Sat, 17 Jun 2000 17:04:38 -0400
To: "www-style" <www-style@w3.org>
Message-ID: <000b01bfd89f$a6512a40$475eba80@fsu>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:05 GMT