2

I have a very basic page with two elements, an outer green box, and inner blue box. I am confused as to why setting the right attribute on the inner box would move it to the left? Furthermore I am confused as to why right:0 would not align the boxes right edge to the right edge of the parent box? Here is my short example page...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #outer {
                background-color : green;
                width : 500px;
                height : 500px;
            }

            #inner {
                position : relative;
                background-color : blue;
                height : 400px;
                width : 400px;
                top : 10px;
                right : 20px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">


            </div>

        </div>
    </body>
</html>
Phrogz
  • 296,393
  • 112
  • 651
  • 745
john-charles
  • 1,417
  • 4
  • 17
  • 30

4 Answers4

4

Setting the right property indicates how far from the right edge your element should be. Think of it as setting a new point of origin. By default, your origination is the top-left of the containing element. You can use bottom and right to change this.

When your element is positioned relative, its right-origin will be the natural location of its right-edge. This is why your element is shifted to the left 20px. If you changed the position value to absolute, the new point of origin will be the right edge of the nearest positioned container, or the viewport itself. In your case, it's the viewport.

For more, see http://www.w3.org/wiki/CSS/Properties/right

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 2
    Specifically you can pick any two of `left`/`width`/`right` and the browser will calculate the other one (and any two of `top`/`height`/`bottom`). – Phrogz Apr 10 '12 at 03:04
  • This does not answer his question in any way. Run his code and you'll see the inner div is floating to the left despite the inclusion of the right tag. – Taz Apr 10 '12 at 03:11
  • @Taz His element is not floated to the left, it's pushed 20px from its natural right location, as my answer stated (and the documentation linked suggested). I have taken your comment and improved upon my earlier answer for clarity. – Sampson Apr 10 '12 at 03:18
1

Throw in a

float:right;

to your inner div and all will work as you expect it.

Taz
  • 1,235
  • 9
  • 16
1

Furthermore I am confused as to why right:0 would not align the boxes right edge to the right edge of the parent box?

You need to set the parent box to position:relative (or absolute, or fixed) if you want it to establish a new coordinate system for all descendants. Otherwise the inner box is still being positioned relative to the body.

For example, compare these two demos:
position:relative outer
position:static outer

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • I just tried that, I inserted `position:relative;` into the `#outer` block above, no other modifications and it does not seem to modify the behavior right still makes the box move left. The only thing that works with the code about is the `float:right` in the child suggested by Taz above. Neither absolute, or fixed change anything either. – john-charles Apr 10 '12 at 03:22
  • Ok, I understand, set the outer div/box to `relative` and the inner to `absolute` or `fixed`. – john-charles Apr 10 '12 at 03:32
0

Setting right is how much you want to push it from the right

Dean_Wilson
  • 190
  • 13