absolute layers margin-left

Last post 12-19-2009, 10:55 PM by davidlockett. 0 replies.
Sort Posts: Previous Next
  •  12-19-2009, 10:55 PM 57845

    absolute layers margin-left

    The editor would have substantially increased value in creating page layouts if the user had the option to nominate that a dragged absolutely positioned div use the attribute position: margin-left; instead of the currently applied attribute position: left; to locate the div on the page.
     
    The reason for this is that within center aligned pages, the position: margin-left; attribute aligns an absolute div relative to the containing page div when the website visitor's browser window is resized. The attribute position: left; attribute by comparison causes the (blue) div and the centered (green) page to not remain in relative alignment with each other.
     
    This attribute can be easily added manually within the page code, however, enabling a dragged absolutely positioned div to have the margin-left attribute applied automatically instead of the currently applied position: left; attribute would provide greatly increased funcionality and would significantly increase the ease by which content can be laid out on a page by simply dragging the absolutely positioned div to a new location within the page area.
     
    Check out and apply the code shown below to see the difference that this simple change makes to a div within a center aligned page.
     
    Unfortunately, dragging the (yellow) position: margin-left; aligned div to a new location within the page reverts the code to using the position: left; attribute and so loses the div's alignment with the containing page.
     
    <html>
         <head>
             <title></title>
         </head>
         <body>
             <center>
             <div style="border-style: none; border-width: medium; width: 500px; height: 500px; text-align: left; background-color:

    #00ff00;">Page
             <div style="position: absolute; width: 163px; top: 270px; left: 475px; background-color: #00ffff;">This absolutely

    aligned div does not move in unison with the underlying page div because it uses the position: left; attribute, which positions

    the div to the left hand side of the browser window<br />
             </div>
             <br />
             <div style="width: 165px; margin-left: 278px; margin-top: 50px; position: absolute; background-color: #ffff00;">This

    absolutely aligned div moves in unison with the underlying page because it uses the position: margin-left; attribute, which

    causes the div to remain aligned to the left side of the containing page.<br />
             </div>
             </div>
             </center>
         </body>
    </html>

     
View as RSS news feed in XML