Absolute Positioning – Demonstration 8

First in series

Close this window to return.

All styles relevant to positioning are located in an internal style sheet. View the source to inspect them.

Page summary. The body of this page has no set width and a margin of 75px. It has position: relative. Absolute positioning takes place within the gridholder div which is relatively positioned with and a margin of 25px.

Rectangle 1
top:0px; left:100px; No width specified.
Rectangle 2 Width
top:50px; left:100px; No width specified. NB This rectangle is relatively positioned.
Rectangle 3 – top:100px; left:100px; No width specified
Etiam sed mi vitae augue volutpat consectetuer. x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
Rectangle 4
top:150px; left:100px; right:200px;
Rectangle 5 top: 200px; left:100px; right:200px;
Etiam sed mi vitae augue volutpat consectetuer. x x x x x x x x x x x x x x x x x x x x x
Rectangle 6
top:250px; left:75px; width:110%;
Rectangle 7
top:300px; right:75px; width:110%;

What to look for:

Rectangle 1 — When no width is specified the width shrinks to fit the content.

Rectangle 2 — For comparison a relatively positioned element does not shrink to fit. The width is the same as for the gridholder. Its left edge is offset by 100px from its flow position which would be the content area of the grid holder (i.e. the inside edge of the padding, 20px) while the absolutely positioned rectangles are offset form the outside edge of the padding.

Rectangle 3 — Style is as for rectangle 1 but content is greater. If the content is sufficient the width expands until constrained by the edge of the containing block.

Rectangle 4 — If both left and right offsets are specified these control the width. With MSIE6 shrinks to fit.

Rectangle 5 — Same as rectangle 4 but with more content. MSIE6 now behaves as others if there is sufficient content.

Rectangle 6 — If width is specified this can overflow containing block and browsers, other than IE6, allow scrolling to view.

Rectangle 7 — If width is specified and overflow occurs to the left browser will NOT allow scrolling to view.

Using Microsoft Internet Explorer version ≤6 you will find mispositioned rectangles. For instance, the left offset is being measured from the content of the grid holder rather than from the padding edge. This indents the left hand side by the padding on the grid holder.

Once again MSIE≤6 positions incorrectly but the same fix may be used as for demonstration 6. See a corrected demonstration.