Marusya's School Notes

Left/Right Align With Position

The second method of aligning elements is to use position: absolute;. Absolute positioned elements are removed from the normal flow, and can overlap elements. When aligning elements with position, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers.

HTML file:	Displayed by browser:
<style> body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; border:3px solid #8AC007; padding: 10px; background-color: #b0e0e6; } </style> <body> <div class="container"> <div class="right"> <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p> </div> </div> </body>	Note: When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.

HTML file:

Displayed by browser:

<body>
  <div class="container">
    <div class="right">
      <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
    </div>
  </div>
</body>

Note: When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.

There is a problem with IE8 and earlier, when using position. If a container element (<div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. So, always set the !DOCTYPE declaration when using the position property.