HTML Utopia: Designing Without Tables Using CSS. Chapter 5: Building the Skeleton | 2

HTML Utopia: Chapter 5: Building the Skeleton

CSS Positioning and Multi-Column Page Layouts

Now that you have an idea of the number of pieces of design for which you’re going to define CSS rules, let’s take a step back and get a basic grounding in how to use specific CSS rules to create these layouts and effects.

The CSS Box Model

From the perspective of a style sheet, everything you deal with in HTML pages can be viewed as living inside a box. This fact is generally far more obvious when you’re formatting large chunks of content, like the seven design elements in the Footbag Freaks Website. But it’s true even when you’re dealing with individual components of those elements, like headings, lists, list elements, and even segments of text.

The basic CSS box model is shown in Figure 5.2.

Figure 5.2. Basic CSS Box Model

Basic CSS Box Model

At the center of the CSS box model is the content itself. Don’t think of this “content” as being the same as words or pictures that comprise the content of a news story or a set of links. The content is anything contained within the area of the box.

Notice from Figure 5.2 that the visible width of the box is determined by adding together the content width, the padding and the border. The margin determines the distance on each side between the visible box and adjacent elements. Similarly, the visible height of the box is determined by adding the content’s height to the padding and border settings. Once again, the margin determines how far the box will be separated from adjacent objects vertically.

The width of each of these elements—margin, border, and padding—can be set using four CSS properties (one for each side of the box), or using a single shorthand property. Border behavior is slightly more complicated because a border can have not only a width but also visible characteristics such as line style and color.

I’ll begin by explaining and demonstrating the use of padding in some detail. Then, I’ll move on to a discussion of margins, which will be briefer, as it’s so similar to padding. Finally, I’ll discuss the border property and its variations.

For the next several sections, I’ll use a basic, single-box layout to demonstrate CSS rule techniques. It starts out as in Figure 5.3 with no padding, border, or margin properties defined, so that the content is the same size as the box.

Figure 5.3. Starting Point for Box Model Demonstrations

Starting Point for Box Model Demonstrations

I’ve given the h1 element a gray background so you can see more easily the impact of the effects I’ll be demonstrating. I'll describe the background-color property I've used here more fully in Chapter 7, Splashing Around a Bit of Color.

This HTML produces the page shown in Figure 5.3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1 {
  background-color: #c0c0c0;
}
-->
</style>
</head>
<body>
<h1>Help! I'm Stuck in a Box Model!</h1>
</body>
</html>

Throughout the rest of this discussion, I’ll be modifying only the style sheet information, so I’ll reproduce only that section of the code, indicating any changes in bold.

Pixels Versus Percentages

Because the box model deals with the display of content on the screen, the pixel measurement (abbreviated px) is the most commonly used of the absolute measurement units in CSS. However, often we desire to create a “stretchy” layout, in which case it is necessary and appropriate to use the percentage model (with the % symbol), rather than pixels. I’ll have more to say on this subject in Chapter 6, Putting Things in Their Place.

Created: March 27, 2003
Revised: June 16, 2003

URL: http://webreference.com/programming/css_utopia/chap5