Part III: CSS for Presentation 326 Page Layout Templates Layouts Using Absolute Positioning Absolute positioning can also be used to create a multicolumn page. The advantage is that the order of the source document is not as critical as it is in the float method, because element boxes can be positioned anywhere. The disadvantage is that you run the risk of elements overlapping and content being obscured. This makes it tricky to implement full-width elements below columns (such as the footer in the previous example), because it will get over- lapped if a positioned column grows too long. When working with absolute positioning, remember that every element you position is removed from the normal flow. If content you expect to be at the bottom of the page is sitting at the very top, it’s because you positioned (and thus removed) all the elements above it that were “holding it down.” This is something to keep in mind while troubleshooting. Two-column with narrow footer Method: POSITIONED Layout: LIQUID The example in this section creates a right sidebar column using absolute positioning. The resulting layout is shown in Figure 16-12. Note that the footer design has been modified for the sake of simplifying the template (full-width footers are problematic, as mentioned earlier). Footer appears only under the main content. Figure 16-12. Two-column layout with absolute positioning. Page Layout Templates Chapter 16, Page Layout with CSS 327 The Markup Markup Notes <div id="header"> Masthead and headline </div> <div id="main"> Main article </div> A <div id="extras"> List of links and news </div> <div id="footer"> Copyright information </div> This style sheet absolutely posi- tions the “extras” div element against the right side of the page and 100 pixels down from the top to leave room for the header ele- ment. The “main” content div is given a right margin wide enough to make a space for the newly posi- tioned box. A� The Style Sheet B #header { height: 70px; padding: 15px; /* height of header = 100 (15+70+15) */ background: #CCC;} C #main { margin-right: 30%; /* makes room for the positioned sidebar */ margin-left: 5%; } D #extras { position: absolute; top: 100px; /* places the extras div below the header */ right: 0px; /* places it against right edge of the window */ width: 25%; background: green; padding: 10px;} /* adds space within colored box */ E #footer { margin-right: 30%; /* keeps the footer aligned with content */ margin-left: 5%; padding: 15px; background: #666; } body { font-family: verdana, sans-serif; font-size: small; margin: 0; padding: 0;} ul { padding: 0px; } li { list-style: none; margin: 10px 0; } WA R N I N G Because this template places columns a specific pixel measurement from the top, it may not be appropriate for pages with headers that may expand taller. The solution is to create another containing div after the header just for the columns, so that the sidebar can be placed in its top-right corner. This will keep the side- bar below the header regardless of its size. The trade-off is a bit of unnecessary markup. WA R N I N G Because this template places columns a specific pixel measurement from the top, it may not be appropriate for pages with headers that may expand taller. The solution is to create another containing div after the header just for the columns, so that the sidebar can be placed in its top-right corner. This will keep the side- bar below the header regardless of its size. The trade-off is a bit of unnecessary markup. Style Sheet Notes In this example, we know that the header is exactly 100 pixels tall (70 height plus 30 pixels of padding). The 30% right margin makes space for the column that is 25% of the page plus 5% space between the columns. The “extras” div is positioned absolutely 0 pixels from the right edge of the browser and exactly 100 pixels down from the top. The margins applied to the main content were also applied to the footer div. That is to prevent the footer from being overlapped by a long sidebar. B� C� D� E� Style Sheet Notes In this example, we know that the header is exactly 100 pixels tall (70 height plus 30 pixels of padding). The 30% right margin makes space for the column that is 25% of the page plus 5% space between the columns. The “extras” div is positioned absolutely 0 pixels from the right edge of the browser and exactly 100 pixels down from the top. The margins applied to the main content were also applied to the footer div. That is to prevent the footer from being overlapped by a long sidebar. B� C� D� E� Part III: CSS for Presentation 328 Page Layout Templates Three-column (narrow footer) Method: POSITIONED Layout: LIQUID In this template, both sidebar columns are absolutely positioned, and mar- gins are applied to both sides of the main content to make way for the side- bars. The resulting layout is shown in Figure 16-13. Footer appears only under the main content. Figure 16-13. Positioning two sidebars in a three-column layout. The Markup Markup Notes <div id="header"> Masthead and headline </div> A <div id="main"> Main article </div> B <div id="links"> List of links </div> B <div id="news"> News and announcements </div> <div id="footer"> Copyright information </div> Because absolute positioning is not order-dependent, the main content div can appear in its pref- erable position first in the docu- ment source. Only the “links” and “news” div elements are positioned in this layout. A� B� Page Layout Templates Chapter 16, Page Layout with CSS 329 The Style Sheet #header { height: 70px; padding: 15px; /* height of header = 100 (15+70+15) */ background: #CCC; } #main { margin-left: 25%; /* makes room for the left sidebar */ margin-right: 25%; /* makes room for the right sidebar */ } C #links { position: absolute; top: 100px; /* places the sidebar below the header */ left: 0px; /* places it against left edge of the window */ D width: 22%; /* less than main margins to add # between cols */ background: fuchsia; } C #news { position: absolute; top: 100px; /* places the sidebar below the header */ right: 0px; /* places it against right edge of the window */ D width: 22%; background: green; } E #footer { margin-right: 25%; /* keeps the footer aligned with content */ margin-left: 25%; padding: 15px; background: #CCC; } Style Sheet Notes The style sheet is essentially the same as that for the previous example, with the exception that margins have been applied to both sides of the “main” and “footer” div elements to make room for columns on both sides. The com- ments within the style sheet provide information on what key properties are doing. The “links” and “news” divs are positioned against the left and right edges of the browser window (technically, it’s the initial-containing block), respectively. The width of the positioned columns is narrower than the margins on the main content div to allow space between columns. The footer gets the same margin treatment as the main content column to make sure the side columns do not overlap it. C� D� E� Part III: CSS for Presentation 330 Page Layout Templates Three-column with rules and padding between columns Method: POSITIONED Layout: FIXED In this three-column layout, all three columns are absolutely positioned in a fixed layout. In addition, borders and padding have been added between col- umns. For reasons of simplicity, the footer has been omitted altogether in this example because there is no way to keep it at the bottom of the page without using JavaScript or jumping through some CSS hoops that are beyond the scope of this chapter. The result is shown in Figure 16-14. Footer has been removed from this example. Because all three blocks are positioned (and thus removed from the normal flow), there is no easy way to keep the footer at the bottom of the page. Rules and padding have been added to this layout. Figure 16-14. Three positioned columns in a fixed-width layout. The Markup A <div id="container"> <div id="header"> Masthead and headline </div> B <div id="main"> Main article </div> B <div id="links"> List of links </div> B <div id="news"> News and announcements </div> </div> Page Layout Templates Chapter 16, Page Layout with CSS 331 Markup Notes Because this is a fixed-width layout, all of the content has been wrapped in a “container” div. All three content-containing div elements are absolutely positioned. The main content div can appear first in the source document. The Style Sheet C #container { position: relative; /* makes "container" a containing block */ width: 750px; } #header { height: 70px; padding: 15px; /* total height = 100 (15+70+15) */ background: #CCC; } #main { D position: absolute; top: 100px; E left: 150px; F width: 428px; /* 450 minus 2px of border and 20px of padding */ border-left: solid 1px black; border-right: solid 1px black; padding: 0px 10px; /* 10 pixels padding left and right */ background-color: aqua; } #links { D position: absolute; top: 100px; E left: 0px; F width: 134px; /* 150 minus 16 px total padding */ padding: 0 8px; /* 8 px padding left and right */ background: fuchsia; } #news { D position: absolute; top: 100px; E left: 600px; /* makes room for other 2 columns */ F width: 134px; /* 150 minus 16 px total padding */ padding: 0 8px; /* 8 px padding left and right */ background: green; } body { font-family: verdana, sans-serif; font-size: small; margin: 0; padding: 0; } ul { padding: 0px; } li { list-style: none; margin: 10px 0; } A� B� Part III: CSS for Presentation 332 Page Layout Templates Style Sheet Notes The “container” div has a fixed width (750 pixels) and its position is set to relative to establish it as a containing block for the positioned column elements All three content divs (“links,” “main,” and “news”) are absolutely posi- tioned below the header. The values for left (that is, the distance from the left edge of the con- taining block area) are relative to the left edge of the entire element box (including margins) for each div, not just the content area. Whenever you add padding, margins, or borders to a fixed-width layout structure, you need to do some math to make sure the sum of the element widths plus all their extras does not exceed the total container width. In the example, the 750 pixel overall width is divided into two 150 pixel sidebars and a 450 pixel main column. Although it may be tempting to set the width of each div to these values, unfortunately, that won’t work. The width property applies only to the content area. Figure 16-15 breaks down all the measurements that span the width of the “container” div. You can easily match the values in the figure to the ones used in the preceding style sheet. 8 + 134 + 88 + 134 + 8 1+10 + 428 + 10+1 150px 450px 150px 750px Figure 16-15. Calculating widths, margins, borders, and padding. WA R N I N G If you need to support Internet Explorer 5 and 5.5 for Windows, your work isn’t fin- ished. IE5 incorrectly implements the box model and applies the width property to the outer edges of the element. A workaround for providing a different set of width properties just for IE5/5.5(Win) is provided in Chapter 14, Thinking Inside the Box. With the release of IE7, many developers have chosen to stop supporting IE5, but of course, whether you choose to support it or not depends on the nature of your site and your own server statistics. C� D� E� F� Page Layout Templates Chapter 16, Page Layout with CSS 333 Now you should be ready to take on an absolutely positioned layout. In this exercise, we’ll use the same content to create a two-column, elastic layout (Figure 16-16) using absolute positioning. Open olympus.html and save it as a new document named elastic-olympus.html. Delete the copyright information paragraph at the end of the document. This layout does not include a footer. Next, add the necessary markup. Once again, add a div named “container” around everything, and divide the content into three div s: “header,” “main,” and “extras.” In the style sheet, set up the page by giving the “container” div a width and setting its position to relative to establish a containing block for the positioned columns. Because this is an elastic layout, the width should be specified in em units. We’ll use a conservative 40em so that the layout can be resized larger a few intervals before running off the typical 1024-pixel wide monitor. #container { width: 40em; position: relative; } Give the header a height (also in em units), padding, and a background color as we’ve been doing throughout this chapter. #header { height: 4em; padding: 1em; background-color: #CCC; } Now we can position the “extras” div . Add this rule to your style sheet to position the sidebar box below the header and give it a width of 10em with 1 em of padding on the left side. #extras { width: 10em; position: absolute; top: 6em; left: 0; padding-left: 1em; } Finally, make room for the positioned sidebar by adding a margin on the left edge of the “main” content div . I’ve added an 12em margin to make room for the 11em-wide sidebar plus 1em space between columns. #main { margin-left: 12em; } 1. 2. 3. 4. 5. 6. 7. Save the file and open it in a browser. It should look like the layout shown in Figure 16-16. Try using the text zoom feature on your browser to make the text larger and smaller and see the elastic layout at work. The page width expands when text is sized larger. Figure 16-16. Two-column, elastic layout. 8. exercise 16-2 | Elastic layout with positioned column Part III: CSS for Presentation 334 Centering a Fixed-Width Page Centering a Fixed-Width Page All of the fixed-width examples we’ve seen so far have been aligned on the left side of the browser window with empty space to the right of it. Although you see plenty of left-aligned pages, many designers choose to center their fixed-width pages in the browser window to split up that potentially awkward left-over space. This section looks at two methods for centering a fixed-width page: the official CSS way and an effective creative solution that works in all CSS- compliant browsers (even Netscape 4). We’ll use these methods to cen- ter the fixed-width three-column page we made earlier (Figure 16-17). Figure 16-17 . Centering a fixed-width page element. Figure 16-17 . Centering a fixed-width page element. Adding color to columns is an effective way to further emphasize the division of information and bring a little color to the page. I have added background colors to the column elements in some of the template demonstrations, but as you have seen, the color stops at the end of the element box and does not extend to the bottom of the page. This is not the effect I am after. Unfortunately, there is no supported way of setting the height of an element to 100% of the page height, and while there are CSS layout templates and JavaScript workarounds that produce full-height column elements, they are beyond the scope of this chapter. But don’t fret. There is a reliable solution known as the “faux columns” trick that will work with any of the fixed-width templates in this chapter. In this technique, column colors are added using a tiling image in the background of the page or containing element (such as the “container” div in the examples).The Faux Columns method was first introduced by Dan Cederholm in his article for A List Apart , and in his book, Web Standards Solutions . Here’s how it works. The column shading in Figure 16-17 is the result of a horizontal image with bands of color that match the width of the columns. When the image is set to tile vertically in the background, the result is vertical stripes over which a multicolumn layout may be positioned. Of course, this only works when the width of the column or page is set in a specific pixel measurement. You may recognize the layout in Figure 16-18. It is the layout we created in Exercise 16-1. If you’d like to give this a try, I’ve included the image file, 2col_bkgd.gif, with the materials for this chapter. Make sure that it is in the same directory as your document 2col-olympus.html, then open the HTML file and add the image to the background of the container div like so: #container { width: 750px; border: solid 1px; background-image: url(2col_bkgd.gif); background-repeat: repeat-y; } 2col_bkgd.gif Figure 16-18. A tiling background image is used to create colored columns. Top-to-Bottom Column Backgrounds CSS Layouts in Review Chapter 16, Page Layout with CSS 335 In CSS, the proper way to center a fixed-width element is to specify a width for the div element that holds all the page’s contents, then set the left and right margins to auto. According to the CSS visual formatting model, this will have the net effect of centering the element in the initial containing block. #container { position: relative; width: 750px; margin-right: auto; margin-left: auto; } This method works for all current standards-compliant browsers, includ- ing Internet Explorer 6 when it is in “compliance” mode (see Chapter 10, Understanding the Standards, about triggering compliance mode). It will not work in IE 6 in “quirks” mode or any earlier version. An alternative method uses negative margins to effectively center a contain- ing block on the page for all browsers that support basic absolute position- ing (including Netscape 4). First, the “container” (the name of the div in the examples) is absolutely positioned so its left edge is 50% across the width of the browser window. Then, a negative left margin is applied that pulls the page back to the left by half its width, thus aligning the mid-point of the block with the mid-point of the window. And voila, it’s centered. #container { position: absolute; left: 50%; width: 750px; margin-left: -375px; /* half the width measurement */ } Exercise 16-3 lets you apply these methods to the pages you created in the previous two exercises. CSS Layouts in Review Using these templates as starting points, you should be able to create a wide variety of page types: liquid, fixed, or elastic; two- or three-column (or more). Whether you choose to do a float-based or positioned layout may depend on the order of your source document and whether you need elements to appear at the bottom of the page. Again, there are many more options for creating page layouts as listed in the More Layout Templates and Tutorials sidebar earlier in the chapter. Be sure to test your layouts in several browsers, because floats and positioning can cause some browser hiccups (see the Browser Bugs sidebar in Chapter 15). exercise 16-3 | Centering layouts In this exercise, you can center the elastic layout you created in Exercise 16-2. We’ll use the proper CSS method that works in all standards compliant browsers (the DOCTYPE at the beginning of the document will ensure IE6-Win switches into Standards Mode and plays along). Open the document elastic- olympus.html that you just created. To center the whole page, simply set the left and right margins to auto , and there you’re done. Save the file and open it in a browser to see the centered page. #container { width: 40em; position: relative; margin-left: auto; margin-right: auto; } If you have time and interest, you can try centering the layout in Exercise 16-1 (2col-olympus.html) using the second method listed above. 1. 2. exercise 16-3 | Centering layouts In this exercise, you can center the elastic layout you created in Exercise 16-2. We’ll use the proper CSS method that works in all standards compliant browsers (the DOCTYPE at the beginning of the document will ensure IE6-Win switches into Standards Mode and plays along). Open the document elastic- olympus.html that you just created. To center the whole page, simply set the left and right margins to auto , and there you’re done. Save the file and open it in a browser to see the centered page. #container { width: 40em; position: relative; margin-left: auto; margin-right: auto; } If you have time and interest, you can try centering the layout in Exercise 16-1 (2col-olympus.html) using the second method listed above. 1. 2. N ot e The negative-margin method is taken from The Zen of CSS Design by Dave Shea and Molly Holzschlag (Peachpit Press). It was originally used by Jon Hicks in his Zen Garden submission. It is also useful for centering an element vertically in the browser window by applying a top offset and setting a nega- tive top margin. N ot e The negative-margin method is taken from The Zen of CSS Design by Dave Shea and Molly Holzschlag (Peachpit Press). It was originally used by Jon Hicks in his Zen Garden submission. It is also useful for centering an element vertically in the browser window by applying a top offset and setting a nega- tive top margin. . using absolute positioning. The resulting layout is shown in Figure 16-12. Note that the footer design has been modified for the sake of simplifying the template (full-width footers are problematic,. window with empty space to the right of it. Although you see plenty of left-aligned pages, many designers choose to center their fixed-width pages in the browser window to split up that potentially. method was first introduced by Dan Cederholm in his article for A List Apart , and in his book, Web Standards Solutions . Here’s how it works. The column shading in Figure 16-17 is the result