6.4. CSS Layout in Practice: Footbag Freaks

Depending on how much past experience you've had with CSS, you may be feeling confident or bewildered after that whirlwind tour of CSS page layout techniques. However you came out of it, I'm certain you'll agree that most professional Web site layouts nowadays are significantly more complex than the three-column layouts that have been the focus of our attention thus far. In this section, we will dissect the page layout of the Footbag Freaks website (Figure 6-13), which more closely approaches the level of complexity you'll face in your practical design work.

A glance at the layout in Figure 6-13 reveals that there is a top block. However, the presence of three columns is obscured by the fact that the large image of the sky near the top of the page straddles what might be seen as the center and right columns. Within that image, however, is another possible column, where "Footbag News" appears. If you look closely, you'll see that this embedded column lines up with the sponsor's ad that displays below the image area.

Reading the HTML for the index.html page of the site reveals that it relies on the styles.css style sheet rules, and that it is divided into the following major div blocks, listed in the order in which they appear in the HTML document:

• top

• featureimg

• center

• left

• news

• sponsor

• footer

There are two other div elements defined in the page: otherleftstuff, contained within the div called left, and topcontent, where the four small links to other locations on the site appear in the upper right corner of the page. Setting those aside for the moment, let's take a look at the CSS rules for the seven top-level div blocks that comprise the layout of the page, to see how they fit into—and differ from—basic multi-column layout.

Here is the CSS rule for the top block (shown in Figure 6-14):

#top {
  padding: 4px;
  background: #BDC5CE url(images/bgtop.jpg) repeat-x;
  border-bottom: 1px solid #A5B5C6;
}

The background setting has nothing to do with CSS positioning, so we can safely ignore it for now. We'll discuss background styles in Chapter 7.

Notice that the top block has no position property defined, only padding of 4 pixels on all four sides and a thin border at the bottom. The absence of a position property makes this block assume its normal position in the document, while the absence of a width property allows it automatically to span the page width.

The CSS rule for the featurimg block (shown in Figure 6-15) looks like this:

#featureimg {
  margin: 0 25% 0 170px;
  height: 250px;
  background: #153976 url(images/sky.jpg) no-repeat right top;
  text-align: center;
  border-top: 1px solid #A5B5C6;
}

This block is not positioned, but it features a four-argument margin setting and a fixed height of 250 pixels. You can deduce from the background setting that this featureimg refers to the picture of the sky that dominates the top portion of the page.

It also defines a one-pixel top border that's the same color as the bottom border of the top block, creating a two-pixel border between the two elements. This rule is really included, however, to overcome some unexplained bad behavior on the part of Mozilla browsers. Otherwise, we could have just used a two-pixel border on the top div and been done with it. When, as is the case here with the flying hacky sack, you embed a child element into the div, Mozilla uses the child object's margin setting instead of that defined for the parent. This is obviously a bug, but this work-around makes its effect invisible.

As we haven't positioned the featurimg element, it displays in the position in which we'd expect it to display, based on its context within the HTML code. The lack of a width setting also makes this area fluid.

Here is the CSS rule that defines the block whose identifier is #center (shown in Figure 6-16).

#center {
  margin: 0 25% 0 25%; 
  padding: 1% 3%;
  background: #fff url(images/bgcenter.gif) no-repeat center;
  color: #000;
}

As you can see, this rule sets margins of 25% for the right and left edges of the column, but eliminates any top or bottom margin. Padding, in turn, is set to 1% for top and bottom, and 3% for left and right, to give the layout some "air." For the sake of example, we use the four-argument shorthand to specify the margin, and two-argument shorthand for the padding—feel free to use the two-argument version for both.

The left column (shown in Figure 6-17) uses absolute positioning. Assuming that it is not contained within another positioned object (and as it turns out, it isn't), the top property positions the top of the column 101 pixels from the top of the document area of the browser. This leaves room for the header area, which is 100 pixels high with a 1 pixel bottom border.

#left {
  position: absolute;
  padding: 0;
  top: 101px;
  width: 25%;
  background: #A5B5C6 url(images/bgbotleft.gif) left bottom
repeat-x;
  color: #000;
}

Setting the left column's width to 25% ensures that its width remains proportional to the width of the browser window's document area as the user resizes it. This setting interacts with other width-related settings of the content that appears horizontally adjacent to the left column on the page, a factor that gets our attention in Chapter 7.

The news block on the Footbag Freaks page (shown in Figure 6-18) appears on the right side of the featureimg block. Here is the CSS rule that defines its appearance and location:

#news {
  position: absolute;
  width: 21.9%;
  height: 250px;
  overflow: hidden;
  margin-left: 75%;
  padding: 0 1.5%;
  top: 101px;
  background-color: #153976;
  border-top: 1px solid #A5B5C6;
}

This rule sets the top of this block at 101 pixels, lining it up with the top of the left block. With a margin-left setting of 75%, and a width of 21.9%, this block of information will always appear three quarters of the way to the right from the left of the window, and will occupy a consistently proportional part of the horizontal space.

You might be wondering why we used 21.9% here, rather than 22%. After all, adding the 75% left margin and the 3% padding (1.5% each left and right), brings us to 78% of the space spoken for. It turns out that the fact that we have a decimal value for left and right padding can, at some window widths, generate a combined width of 101%. This, in turn, generates a horizontal scrollbar for the news block. To avoid that ugliness, we simply reduce the width by 0.1% so that the total never exceeds 100%. It may not be the ideal solution, but it works.

The CSS for the sponsor block (shown in Figure 6-19) is similar to that for the news block:

#sponsor {
  position: absolute;
  width: 21.9%;
  height: 251px;
  margin-left: 75%;
  padding: 10px 1.5%;
  top: 375px;
  text-align: center;
}

The two key differences between sponsor and news are the top value of 375 pixels and the top-bottom padding of 10 pixels. The height happens to be one pixel larger than the news block, but that's only an interesting coincidence.

Finally, here's the CSS for the footer block (shown in Figure 6-20):

#footer {
  clear: both;
  border-top: 1px solid #5C6F90;
  border-bottom: 1px solid #5C6F90;
  background-color: #D6D6D6;
  color: #000;
}