Chapter 4: The division of space

The illustrator Alex Dukal has a site that is coherent, meaningful and functional. Every Web page needs an underlying structure, the division of space and use of forms called architecture.

CSS has the same advantages for dividing your space as it does for controlling text: The format is separated from the content. In the future this will become more and more important as the same information is sent to a variety of devices, such as mobile phones. Web pages can detect the device and use an appropriate stylesheet.

Our basic space is the browser window. We want to fit our pages into the window so that we make maximum use of the space while minimizing overflow that requires scrolling.

The browser window presents special challenges for the designer because:

For these two reasons, deciding how to divide your space first requires that you define that space according to some logical process.

We also want to divide the space in a way that will be:

To do this, we will create a series of boxes using CSS, the we will position those boxes into a coherent whole.

Before you proceed:

Learning objectives

The student who completes this chapter should be able to: