HTML and CSS Reference
In-Depth Information
Example 3.19: HTML to demonstrate CSS positioning (continued)
<div id="d1">
<div id="d2"></div>
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
#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
Search WWH ::

Custom Search