Absolute Positioning – Demonstration 6

First in series
Next 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.

Square
1
Square
2
Square
3
Square
4
Square
5
Square
6
Square
7

Page summary. The body of this page has no set width and a margin of 50px. It has position: relative. The first three text items appear in the body. After that the grid holder division is coded. This division has a margin of 25px and left and right padding of 20px. To clarify this the body has a light grey border.

The grid holder division is now relatively positioned so that it can be used for positioning other elements. The squares are the first items in this div.

Squares are styled exactly as for the first in the series.

What to look for:

The positions of the squares are now related to the padding edge (i.e. the outer edge of the padding) of the grid holder not of the body.

As you alter the viewport squares 1 to 4 should remain in the corners of the grid.

Square 5 is 200px from the top of the division and 100 px from the left.

Square 6 is 300px from the top of the division and 20% of the division width from the left.

Square 7 is centred horizontally on the centre line of the division.

Squares 5 and 6 are fixed distances (200 and 300px) from the top of the division so, depending on the width of the viewport and text size, may move out of the division.

If you are using Microsoft Internet Explorer version ≤6 you will find that squares 3, 4 and 7 may be missing and that square 2 is in the wrong place. See red text below.

MSIE≤6 under some circumstances may respond incorrectly to offsets right and bottom. This can occur when absolutely positioned elements are located in a relative positioned block when that block has neither height not width specified. A remedy is to specify height or width but this may not be convenient as is the case here. For a solution see a corrected demonstration.