Square
7a
Square
8
Square
9
Square
10
Square
11

Absolute Positioning – Demonstration 7
Absolute Positioning of centres

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.


.