First
in series
Next
in
series
Close this window to return.
All the styles used are located in an internal style sheet. View the source to inspect them.
Page summary. Like Demonstration 5 the body of this page has no set width and a margin of 50px. In the body is a div which has grid background ruled at 20 and 100px. The body has been given position: relative; Squares 1 to 6 previously used have been removed. Square7 has been modified slightly and squares 8, 9, 10 and 11 have been added. These are positioned with left 0%, 25%, 75% and 100% with square 7 remaining at 50%. All of these have both margin-left and margin-bottom set to -25px.The horizontal line has been given a bottom margin so that the squares can be seen more clearly.
The position details of the squares are
Square 8
position:
absolute;
bottom:
0px; margin-bottom: -25px; left: 0%; margin-left:
-25px;
Square 9 position: absolute; bottom:
0px; margin-bottom: -25px; left: 25%; margin-left: -25px;
Square
7a position: absolute; bottom: 0px; margin-bottom: -25px; left:
50%; margin-left: -25px;
Square 10 position:
absolute; bottom:
0px; margin-bottom: -25px; left: 75%; margin-left: -25px;
Square
11 position: absolute; bottom: 0px; margin-bottom: -25px; left: 100%;
margin-left: -25px;
What to look for:
Squares 8 and 11 should be centred on the edges of the body.
The horizontal centres of squares 9, 7 and 10 should remain at 25%, 50% and 75% of the body width as the viewport width is varied.