Re: positioning elements and left,right,bottom,top

I'm not very familiar with positioning, but this
is what I gathered:

Left defines the distance from the outer (margin)
left edge of the positioned box to the inner
(padding) left edge of its containing  block.
Likewise for the other three properties.

 ______________________________________
 |                 ]                  |
 |    _____________]_____________     |
 |    |                         |     |
 |----|                         |     |
 |    |       positioned        |-----|
 |    |        element          |     |
 |    |_________________________|     |
 |                    ]               |
 |    containing      ]               |
 |      block         ]               |
 |____________________]_______________|

Here, I have set all four properties on the
positioned element as follows:

element {
  position: absolute;
  left: 4u;
  right: 5u;
  top: 2u;
  bottom: 4u
}
[where u=units]

   (Since the margins are auto, they will stretch
    to fill the space between the box defined by
    the positioning properties and the borderline
    of the positioned element.)

If you want to position something in the top
right corner, you only need to specify the 'top'
and 'right' properties. The dimensions of your
positioned element are already set by the width
and height properties.

travis wrote:

 | #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 }

Received on Sunday, 18 June 2000 10:57:09 UTC