Learning Web Design Third Edition- P35 pdf

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.