Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 295

Absolute Positioning and Element Widths
In Figure 4-64, you set the width of the aside element to 30%—but 30% of what?
Percentages usually are based on the size of the container element. The 33% left margin
you assigned to the president's message in Figure 4-27 represented a length that was
33% of the width of the Web page because the president's message was nested within
the body element. The 50% width assigned to the article element in Figure 4-48 repre-
sented 50% of the width of the section element because the article was nested within
the section.
However, the aside element, while nested within the body element in the HTML fi le,
has been placed in the Web page using absolute positioning, and that takes it out of the
normal document fl ow. The 30% width represents 30% of the width of the container
element, but only if that container also has been placed using either absolute or relative
positioning. If not, the percentage is based on the width of the browser window itself.
This is the same effect you saw earlier in the demo when the position of the inner object
depended on whether the outer object itself also had been placed using absolute or rela-
tive positioning.
In a fl uid layout, you want the sizes of all the page sections to be based on the same
thing so that they all are resized the same way. To fi x this in the Cycle Pathology Web
page, you'll place the entire page body using relative positioning. Recall that you simply
can apply the style position: relative to any page element to place it at its default
location; the key difference will be that the width of the aside element will be based on
the width of the page body rather than the browser window.

To position the entire page body:

◗

1. Return to the cp_styles.css file and locate the style rule for the body selector near
the top of the page.

◗

2. Add the following property to the style rule as shown in Figure 4-68:

position: relative;

Figure 4-68 Applying relative positioning to the page body

◗

3. Save your changes to the file and then reload the cycle.htm file in your Web
browser. Change the size of your browser window and verify that the width of the
aside element changes proportionally along with the widths of the other page
elements.

Dan likes the appearance of the Upcoming Events sidebar, but he feels it's too long
and would like you to reduce the height of the object so that it appears within the
boundaries of the browser window.