One fundamental concept that is essential to making the fixed header, footer, and side columns techniques work has to do with how absolutely positioned elements handle sizing. In Chapter 7, you learned that block elements have a width that is expand-to-fit by default. Block elements such as <h1>, <div>, <p>, and so on, expand to fill the space available to them horizontally, and expand vertically in the shrink-to-fit fashion, that is, only enough to accommodate the content contained within them. When elements are positioned absolutely, they all take on the shrink-to-fit sizing behavior, for both width and height. An example of this appears in Figure 11-13.

Figure 11-13a. Figure 11-13a

The main style sheet in Figure 11-13a contains two demonstrations of sizing: a statically positioned <p> element, and an absolutely positioned <p> element. As you'll see in Figure 11-13c, positioning an element absolutely causes it to use a different method of sizing, shrink-to-fit. The main style sheet in Figure 11-13a is included in the markup that you see in Figure 11-13b to create the rendered output in Figure 11-13c.

Figure 11-13b. Figure 11-13b

In Figure 11-13c, you see that the two <p> elements have different dimensions. The statically positioned one takes up all the horizontal area that's available to it, and the absolutely positioned <p> element only expands enough to accommodate the content that it contains.

Figure 11-13c. Figure 11-13c

To use absolute positioning to emulate fixed positioning for a header, you need a way to make an absolutely positioned element use the other method of sizing, expand-to-fit. The CSS specification just so happens to support just such a feature, and specifying opposing offset properties on the same absolutely positioned element does it. For example, to stretch content horizontally for the entire width available to it, you specify both the left and right offset properties to imply width. Or if you want to stretch an element vertically for all the space available to it, you specify both the top and bottom offset properties to imply height. The term imply is used here because you don't actually specify width or height. Dimensions are implied because you expect specifying both the left and right offset properties on the same absolutely or fixed positioned element to stretch the element.

If you want both horizontal and vertical fluidity on an absolutely positioned element, you specify all four offset properties on the same element. Unfortunately IE 7 in quirks rendering mode, IE 6, and earlier do not support this useful feature (IE 7 in standards mode does support this feature), but as is the case with most problems with IE, there is a relatively painless workaround, which you observe later in this chapter.

An example of horizontally stretching an absolutely positioned element appears in Figure 11-14.

Figure 11-14a. Figure 11-14a

In Figure 11-14a, you see the main style sheet, and within it you see an example strikingly similar to the one you saw in the source code and screenshot that make up Figure 11-13. That is to say, you have a statically positioned <p> element, and an absolutely positioned <p> element. This time the absolutely positioned <p> element will wind up having the same dimensions as the statically positioned <p> element, and this is done by specifying left: 0; and right: 0; on that element to make it stretch horizontally, for all the space available to it, the same way that the statically positioned <p> element is sized as a normal block-level element. The main style sheet in Figure 11-14a is included in the markup that you see in Figure 11-14b.

Figure 11-14b. Figure 11-14b

In Figure 11-14c, the screenshot shows that the statically positioned <p> element and the absolutely positioned <p> element now have the same width. You'll see the same results in IE 7, but as I mentioned earlier, IE 6 has other plans, which you see a workaround for later in this chapter.

Figure 11-14c. Figure 11-14c

In Figure 11-14c, the concept of horizontally stretching an absolutely positioned element via specifying both the left and right properties is made clear, but this example begs the question, why can't you just specify the width as 100 percent? That's a good question, and a common misconception made by beginners. The answer to this question is, when you have any block element, absolutely positioned or not, and you apply padding, borders, or margin to it, and then give it a width of 100 percent on top of those properties, you won't end up with the results that you expect. This has to do with how percentage measurement works. If you recall from Chapter 7, a percentage width is determined by the width of an element's parent. So if the parent element has a width of 700 pixels, for example, your element with 100 percent width will also have a width of 700 pixels, and then the lengths for margin, borders, and padding are applied on top of that width, and your element overflows the boundaries of its parent. If the parent element is the <body> element, and the 700 pixels measurement happens to be the width of the browser's viewport, you'll wind up with your element with 100 percent width causing horizontal scroll bars, because it is too big to fit in that 700-pixel width. By stretching elements with opposing offset properties, the resulting width is whatever is left over after margin, borders, and padding are already applied, thus avoiding scroll bars.

Still not clear on how percentage width works? Try a small experiment for testing percentage width. Take the source code from Figure 11-14a and Figure 11-14b (you can get the source code for all of this book's examples with the book's source code download from www.wrox.com), and try applying a width of 100 percent to the absolutely positioned <div>. Compare the resulting output with what you see in Figure 11-14c. Notice any differences?

Conversely, Figure 11-15 demonstrates how to stretch an element vertically by specifying both the top and bottom offset properties.

Figure 11-15a. Figure 11-15a

In the main style sheet that you see in Figure 11-15a, the absolutely positioned <p> element now has both the top and bottom properties set as top: 0; and bottom: 0;, which will cause the <p> element to be stretched vertically for the height of the browser's viewport.

In Figure 11-15c, you observe that the absolutely positioned <p> element is stretched vertically for the height of the browser's viewport.

Figure 11-15b. Figure 11-15b

Figure 11-15c. Figure 11-15c

Figure 11-16 demonstrates both horizontal and vertical fluidity on the same element via specification of all four offset properties.

In the main style sheet that appears in Figure 11-16a, the absolutely positioned <p> element now has all four offset properties set, which causes the <p> element to be stretched both horizontally and vertically.

The CSS from Figure 11-16a is included in the markup that you see in Figure 11-16b.

In Figure 11-16c, you see that the <p> element is stretched both vertically and horizontally, taking up the whole browser window.

Figure 11-16a. Figure 11-16a

Figure 11-16b. Figure 11-16b

Figure 11-16c. Figure 11-16c

The screenshot shows how both horizontal and vertical fluidity is achieved through specifying top, right, bottom, and left on the same element. At this point you may be asking yourself, does the value of the offset property have to be zero? No, it does not. You can use any value you like, a value larger than zero will simply modify where the element is positioned and decrease its dimensions.

This concept of stretching elements via absolute positioning is also an essential ingredient in the multi-column layouts that I present later in this chapter. In the next section, I discuss how to make a fixed header without fixed positioning.

A fixed heading is pretty easy to pull off, without support for fixed positioning. You simply use absolute positioning to make a fixed heading, and a second container element that is also absolutely positioned, that invokes scroll bars using the overflow property that you saw in Chapter 7. Making a fixed heading is demonstrated in Figure 11-18.

In Figure 11-18a, you see the main style sheet that all browsers will see. The <h1> element is acting as your fixed heading for this example, and the document's content is going to be kept inside the <div> element with id name container. Both the <h1> element and the container <div> element are given an absolute position, so that their place on the screen can be dictated with fine precision. For the heading, you take the <h1> element and stretch it horizontally by specifying both the left and right offset properties with a value of zero. This will cause the absolutely positioned <h1> element to act like a statically positioned <h1> element, and take up all the space available to it horizontally. Could you just use a statically positioned <h1> element and get the same result? You can. It is not essential that the <h1> element be absolutely positioned; it's just another means to the same end, and a fine example of how web designers sometimes forget fundamental design concepts when designing a page, and actually end up over-engineering a design. The rule for the <h1> element could be rewritten as follows:

h1 {
    height: 20px;
    font-weight: normal;
    font-size: 18px;
    border-bottom: 1px solid rgb(200, 200, 200);
    background: white;
    margin: 0;
    padding: 5px;
}

The preceding rule produces the same result. I've included the over-engineered version to demonstrate how unnecessary properties can creep in unexpectedly. While it doesn't have to be positioned, I'm going to leave it that way merely for consistency with the other elements on the page, but bear in mind, it doesn't have to be that way.

Figure 11-18a. Figure 11-18a

For IE 6 to properly stretch the absolutely positioned elements, it needs a bit of help. The workarounds appear in Figure 11-18b.

Figure 11-18b. Figure 11-18b

The CSS in Figure 11-18b is included because IE 6 does not support stretching an element via specifying opposing offset properties on the same element. As you've seen in earlier examples in this Chapter, and in Chapter 7, a dynamic expression is used to emulate the effect of opposing offset properties in IE 6. You simply include the dynamic expression feature, which references a small snippet of JavaScript. documentElement refers to the <html> element, and offsetHeight is a property that is used to get the <html> element's, well, offset height, which for you and me means the height of the browser's viewport. Remember, if you use a Document Type Declaration that causes IE 6 or IE 7 to render in quirks mode, this trick won't work. If you face this situation, you'll want to use document.body.offsetHeight instead of documentElement.offsetHeight. See Chapter 7 for more information on quirks rendering mode versus standard rendering mode (nearly all of the examples in this book invoke standards rendering mode).

The CSS in Figure 11-18a and Figure 11-18b are included in the markup that you see in Figure 11-18c.

Figure 11-18c. Figure 11-18c

IE 6 and IE 7 continue to show a scroll bar for the whole window, even though it isn't needed. You apply the overflow: hidden; declaration to the <html> element to get rid of the scroll bar via Microsoft's conditional comments that target IE 7 and earlier versions. Now the redundant scroll bar is no more.

The source code in Figure 11-18a, b, and c gives you a layout that works well between the different browsers, as you see in the screenshot that appears in Figure 11-18d.

Figure 11-18d. Figure 11-18d

In Figure 11-18d, you can see that the heading stays in place whenever the content is scrolled. You could just as easily replace the <h1> with a <div> there and include additional content that stays fixed in place at the top of the page. But how do you do a fixed footer? This is covered in the next section.

For a fixed footer, the idea is pretty much the same as you saw for making a fixed heading, but everything's reversed to the bottom. A demonstration of how to do a fixed footer appears in Figure 11-19.

Figure 11-19a. Figure 11-19a

Then as was the case with the fixed heading example in the last section, another style sheet targeting IE 6 is made with adjustments to facilitate a fixed footer rather than a heading. The technique can have several approaches, but the principle is that either the top or the bottom offset property can be set, and the height of the container element must be adjusted in relation to the height of the viewport, and the height of the footer. The IE 6 style sheet appears in Figure 11-19b.

Figure 11-19b. Figure 11-19b

Again, the scroll bar for the viewport that is present by default must be turned off in IE 6 and IE 7, just as it was for the fixed heading example in the previous section. The CSS from Figure 11-19a and Figure 11-19b are included in the markup that appears in Figure 11-19c.

Figure 11-19c. Figure 11-19c

The result of the source code appears in Figure 11-19d, where you see a fixed footer that works on a variety of browsers and platforms.

Figure 11-19d. Figure 11-19d

In Figure 11-19d, top has become bottom, and the heading becomes the footer. The same concepts are at play here as you saw for the fixed heading. So naturally, it ought to be easy to combine the two now in one example. The next section describes how to do both.

The concepts of the previous two sections are now married into one example, which is demonstrated in the source code and screenshots shown in Figure 11-20. In Figure 11-20a, you see the styles from the fixed heading and the fixed footer examples have been merged into one style sheet.

Again, in Figure 11-20b, you see the IE 6 style sheet, which now contains styles that facilitate both a fixed heading and a fixed footer.

Figure 11-20a. Figure 11-20a

Figure 11-20b. Figure 11-20b

Then the styles from Figure 11-20a and Figure 11-20b are included in Figure 11-20c.

Figure 11-20c. Figure 11-20c

You see the result of the merged fixed heading and fixed footer examples in Figure 11-20d.

Figure 11-20d. Figure 11-20d

In Figure 11-20d, you can see that with just a few tweaks, you can have both a fixed heading and a fixed footer in your document. In the next section, I continue this style of layout with fixed side columns instead of a fixed heading or a fixed footer.

The ideas at play for making fixed side columns are along the same lines that you've observed in the previous three sections. With just a few modifications, you can have fixed side columns instead of fixed heading or a fixed footer. The source code and screenshots are in the collection of figures that together make up Figure 11-21. You begin with the main style sheet that's presented in Figure 11-21a.

Figure 11-21a. Figure 11-21a

In Figure 11-21a, you see that instead of an <h1> element for the heading, and a <div> with an id name of footer for the footer, you have two <div> elements with id names left and right. Common style sheet declarations that both the left and right <div> elements share are grouped together, and additional rules appear for declarations that are unique to each. Again, the concept of absolute positioning is to create elements that remain fixed in place when the <div> element with id name container is scrolled. Like the examples that you saw for the fixed heading and the fixed footer, you use opposing offset properties to stretch each of the absolutely positioned elements vertically, which is done by specifying both the top and bottom offset properties on all three absolutely positioned elements to imply height. You must also alter the container <div> element so that there is enough room for the side columns; otherwise the side columns would simply overlap that container <div> element. You do this by setting the left and right offset properties to 211 pixels. This figure is arrived at by taking the width of the left <div>, for example, plus its left padding, plus its right padding, plus one pixel of border, which together add up to 211 pixels. The remaining styles present in the style sheet aren't really important, since they're really just cosmetic and don't effect the overall concept of making fixed side columns.

Of course, as you saw in previous examples, specifying opposing offset properties to stretch an element doesn't work in IE 6. You correct this deformity by supplying IE 6 a style sheet all its own, as you did in previous examples. This style sheet appears in Figure 11-21b.

Figure 11-21b. Figure 11-21b

The IE 6 style sheet makes similar adjustments as you've seen in previous examples. The two <div> elements with id names left and right are stretched for the whole height of the browser's viewport via a dynamic expression that calls a small snippet of JavaScript, which provides the height of the documentElement, or the <html> element, via its offsetHeight property. Remember, this technique does not work in IE 6 or IE 7 when those browsers are in quirks rendering mode, nor older versions of IE prior to version 6, and must be replaced with document.body.offsetHeight, instead of documentElement.offsetHeight. The style sheets that you saw in Figure 11-21a and Figure 11-21b are included in the markup that you see in Figure 11-21c.

Figure 11-21c. Figure 11-21c

Again in Figure 11-21c, the redundant scroll bar that IE 6 and IE 7 include is nullified with the overflow: hidden; declaration. Now IE 6, IE 7, Safari, Firefox, and Opera all produce the same results. The output from IE 6 as well as Safari appears in Figure 11-21d.

Figure 11-21d. Figure 11-21d

And to wind down the examples of fixed headings and footers and side columns, the next section demonstrates all of them together in the same document.

In this example, you put together the examples of the previous two sections to get a document with a fixed heading, footer, and side columns. You begin with the style sheet shown in Figure 11-22a.

Figure 11-22a. Figure 11-22a

No surprises here. The main style sheet in Figure 11-22a makes adjustments to the container <div> element to accommodate both a heading and a footer and side columns. You'll note that the container <div> element is offset from the top and bottom respective to the collective height of the heading and the footer, that is to say, the height property, plus top and bottom margin, border, and padding, and from the left and right relative to the collective width of the left and right side columns, which is the width property plus left and right margin, border, and padding. The side columns are also adjusted from the top and bottom with respect to the collective height of the footer and the heading. With the exception of these minor tweaks, the concept is basically the same as you've seen in previous sections. In Figure 11-22b, you see the IE 6 style sheet that's required to bring IE 6 on par with the output seen in other browsers.

Figure 11-22b. Figure 11-22b

In the IE 6 style sheet that you see in Figure 11-22b, you again see a marriage of the concepts that you've observed in previous sections, only now you see measurements that accommodate both side columns, a heading, and a footer. The style sheets in Figure 11-22a and Figure 11-22b are included in the markup that you see in Figure 11-22c.

Figure 11-22c. Figure 11-22c

The output that you see in Figure 11-22d is what results from the source code in Figure 11-22a, Figure 11-22b, and Figure 11-22c.

Figure 11-22d. Figure 11-22d

In the next section, I discuss how you can control layering of positioned elements with the z-index property.