HTML and CSS Reference
In-Depth Information
Example 3.19: HTML to demonstrate CSS positioning
(continued)
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
here is no content in these elements. In each example, the document body
consists of the same two nested divisions with borders to show their size and
positioning. he
body
element has a dotted border, the outer division has a
dashed border, and the inner division has a solid border. Figure 3.19a shows
how the code of Example 3.19a is displayed in a typical browser.
Figure 3.19a: Nested divisions with static positioning
he outer division,
d1
, has a height and width of 200 pixels. he inner
division,
d2
, has its
height
and
width
properties set to 50%, which makes it a
100-by-100-pixel square occupying the top-let quadrant of its parent, which
sits within the
body
element's 1 em of padding.
You can edit the CSS statement for the inner division to set absolute
positioning:
#d2 { width: 50%; height: 50%; border: solid;
position: absolute; }
Saving and reloading the example displays something similar to Figure
3.19b. Because the
top
,
right
,
bottom
, and let properties all have the default
