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 div with the grid background is now absolutely positioned so that it can be used for positioning other elements. The squares are the first items in this division.

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 are missing and that square 2 is in the wrong place. See red text below.

The problem with the previous demonstration has been fixed by targeting a modified style rule at MSIE6. This rule is not seen by other browsers and supplies a height to the division. In a case like the present a fixed height is unacceptable but due to a bug in MSIE6 a division which is too small expands to fit its contents so a small height can be applied without a problem. In this case 10px is being used.

The style rule is not included in the internal style sheet directly but is linked by using the code:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ln_ie6_corrections.css" />
<![endif]-->

The external stylesheet has the code
#grid_holder { height: 10px; }