Home/ Questions/Q 7754143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:14:02+00:00

I have a very basic page with two elements, an outer green box, and

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0