untitled

232 Part III: Adding Artistry: Design and Composition with CSS

Nesting boxes within a page box

Consider these suggestions to help you more

quickly reposition an entire Web page at once.

The downside about absolute positioning is that

it makes moving everything on the page at once

difficult. Each placeholder must be moved indi-

vidually. Instead, you may prefer to create an

outermost box that you name “page” and use it

to relatively position all your elements within.

Here’s why: What if you complete a site using

CSS layout and absolute positioning, but the

boss later tells you that all corporate Web

pages must now be 798 pixels in width, and cen-

tered in the browser with a white border around

them. What the boss says, goes, right? You’ve

got a pretty big revision to do if all your elements

are positioned absolutely.

To solve this problem, create a page box as the

outermost box, and then relatively position

everything within that outer box. This way, you

can move the whole “page” down, over, cen-

tered, or wherever you want without having to

manipulate the positions of each element inside.

Consider, for example, using an absolutely posi-

tioned outer box with areas for a header, footer,

sidebars, and so on. (Note that those inner ele-

ments arerelatively positioned.)

Another useful technique is to first draw a tem-

plate on paper for your Web page. This is very

helpful: Relative nesting of boxes gets confus-

ing if you try to do it ad hoc on the computer.

After you’ve drawn the overall design, write the

CSS code to make that design come to life on

the screen. Add content to the page and rela-

tively position it within the template. You can

easily rearrange your pages by swapping head-

ers, footers, sidebars, or main content areas just

by changing the CSS for those areas.