Learning Web Design Third Edition- P34 pot

Part III: CSS for Presentation
316
Elastic Layouts
Elastic Layouts
A third layout approach is growing in popularity because it marries resizable
text with predictable line lengths. Elastic (also called jello) layouts expand or
contract with the size of the text. If the user makes the text larger, the box that
contains it expands proportionally. Likewise, if the user likes her text size very
small, the containing box shrinks to fit. The result is that line lengths (in
terms of words or characters per line) stay the same regardless of the text size.
This is an advantage over liquid layouts where line lengths can get too long,
and fixed layouts where very large text may result in awkwardly few charac-
ters per line.
Figure 16-6 shows the Elastic Lawn design by Patrick Griffiths at CSS Zen
Garden (www.csszengarden.com/?cssfile=/063/063.css), an often-referenced
example of an elastic layout at work. Notice that when the text size gets big-
ger in each sample, so does the content area of the page. However, instead of
rewrapping in the larger layout space, the line breaks are the same.
48 em 48 em
Line length and line breaks stay the same
Figure 16-6. The Elastic Lawn design by Patrick Griffiths at CSS Zen Garden is a classic
example of elastic page layout.
As any layout approach, elastic layouts come with their own pros and cons:
Advantages Disadvantages
Provide a consistent layout experience
while allowing flexibility in text size.
Tighter control over line lengths than
liquid and fixed layouts.
Images don’t lend themselves to
rescaling along with the text and the
rest of the layout.

The width of the layout might exceed
the width of the browser window at
largest text sizes. This can be prevented
with proper planning and/or the
max-width property (unsupported in
IE6 and earlier).
Elastic Layouts
Patrick Griffiths, the creator of
Elastic Lawn, has written some
good tutorials and demos of elastic
layouts, available here:
“Elastic Designs” article at
A List
Apart
(alistapart.com/articles/
elastic)
Elastic layout demo at
HTML Dog

(www.htmldog.com/articles/
elasticdesign/demo/)
t I P
Elastic Layouts
Patrick Griffiths, the creator of
Elastic Lawn, has written some
good tutorials and demos of elastic
layouts, available here:
“Elastic Designs” article at
A List
Apart

(alistapart.com/articles/
elastic)
Elastic layout demo at
HTML Dog

(www.htmldog.com/articles/
elasticdesign/demo/)
t I P
N o t e
AOL.com also uses an elastic layout (as
of this writing), demonstrating that this
approach is a viable option for large sites
with lots of detailed information on the
home page.
N o t e
AOL.com also uses an elastic layout (as
of this writing), demonstrating that this
approach is a viable option for large sites
with lots of detailed information on the
home page.
Elastic Layouts
Chapter 16, Page Layout with CSS
317
How to create elastic layouts
The key to elastic layouts is the em, a unit of measurement that is based on
size of the text. For example, for an element with 12-pixel text, an em is 12
pixels. In Chapter 12, Formatting Text, we learned that it is always preferable
to specify font size in ems because it allows the text to be resized with the
zoom feature in all modern browsers (remember that IE6 and earlier do not
zoom text sized in pixels). In elastic layouts, the dimensions of containing

elements are specified in ems as well. That is how the widths can respond to
the text size.
For example, if the text size is set to 76% (equal to about 12 pixels on most
browsers), and the page is set to 40 em, the resulting page width would be
480 pixels (40 em x 12px/em). If the user resizes the text up to 24 pixels, the
page grows to 960 pixels. Note that this is getting close to the available canvas
space in browsers on 1024-pixel wide monitors. If the page were set much
more than 40 ems wide, there would be the risk of the right edge extending
beyond the browser window at extremely large text sizes.
Elastic layouts are created
by specifying widths in em
units.
Elastic layouts are created
by specifying widths in em
units.
Users who are totally blind may use screen readers to access
web content. However, there are many visually impaired users
who have enough vision to view sites on computer monitors as
long as the type is large and the contrast is good.
A new layout technique, called zoom layouts (Figure 16-7), has
emerged to address the special requirements of these low-
vision users. The hallmarks of zoom layouts include:`
A single column layout
Extremely large type (set in ems for scalability)
High-contrast text and background (both light-on-dark and
dark-on-light versions are often supplied)
Simplified navigation that appears at the beginning of the
document
Some visual elements such as color and simple graphics to
create an experience consistent with that of the site’s normal

presentation.
Zoom layouts are usually provided as an alternative to the site’s
normal design. They're made accessible to those who need it
via a link at the top of the page.
The champion of the zoom layout is accessibility expert,
Joe Clark. For more information, these links to Mr. Clark’s
publications are a good place to start.





The Zoom Layout Page
joeclark.org/access/webaccess/zoom/
Zoom Layout presentation at @media 2005
joeclark.org/atmedia/atmedia-NOTES-2.html
“Big, Stark, and Chunky,” article at
A List Apart

alistapart.com/articles/lowvision
Figure 16-7. A zoom layout designed by Doug Bowman at
stopdesign.com.
Zoom Layouts for Low-Vision Users
Part III: CSS for Presentation
318
Page Layout Templates
Which one should I use?
As you can see, each layout approach has its own advantages and drawbacks.
Developers tend to have their favorites, and if you read through comments
left on CSS-design-related web sites, you’ll find that there are some passion-

ate opinions for and against each approach (see the sidebar, The Liquid vs.
Fixed Debate).
I’m of the opinion that there is no “right” way to lay out all web pages. I find
that the best solution is usually a function of the nature of content and design
of the site I am working on. You will probably find the same thing to be true.
But now you know the various options and can take them into consideration
when it is time to lay out the page.
Page Layout Templates
Here it is the section you’ve been waiting for: how to create two- and three-
column layouts using CSS and absolutely no tables. The code examples in
this section should give you a good head start toward formatting your pages,
but they are not universal solutions. Your content may dictate more compli-
cated solutions. You may also prefer one of the more robust templates listed
in the More Layout Templates and Tutorials sidebar.
This section provides templates and techniques for the following:
Multicolumn layouts using floats (two- and three-column)
Multicolumn layouts using positioning (two- and three-column, with and
without footer)
A centered fixed width page
Using the templates
The sample pages in this section aren’t pretty. In fact, I’ve stripped them down
to their bare minimum to help make the structure and strategy as clear as
possible. Here are a few notes regarding the templates and how to use them.
Simplified markup
The DOCTYPE declaration, and other document structure markup
(html, head, title, and body elements) have been omitted from the tem-
plates to save space. Be sure that your documents have the proper struc-
tural markup.
Headers and footers
I’ve included a header and footer element on many of these examples, but

either one or both could easily be omitted for a minimal two- or three-
column layout.
•
•
•
The Liquid vs. Fixed
Debate
The “liquid or fixed” question has
sparked impassioned debate among
professionals in the web design
community. There has been an
undeniable trend toward fixed-width
layouts (presumably to control line
lengths), but there are still staunch
proponents of liquid designs as best
for a medium where the canvas
size is unknown. Many designers
from both sides are switching to
elastic layouts as a solid compromise
solution.
To get caught up with both sides of
the debate, start with these articles
and blog entries (they all have links
to additional points of view):
“On Fixed vs. Liquid Design,” by
Doug Bowman (experimenting
with fixed width design at www.
stopdesign.com/log/2003/12/15/
fixedorliquid.html)
“More on fixed widths,” by Richard

Rutter (pro–liquid design article
at clagnut.com/blog/269/)
“Fixed Fashion,” by Jeremy Keith
(pro–liquid designpost at www.
adactio.com/journal/980)



The Liquid vs. Fixed
Debate
The “liquid or fixed” question has
sparked impassioned debate among
professionals in the web design
community. There has been an
undeniable trend toward fixed-width
layouts (presumably to control line
lengths), but there are still staunch
proponents of liquid designs as best
for a medium where the canvas
size is unknown. Many designers
from both sides are switching to
elastic layouts as a solid compromise
solution.
To get caught up with both sides of
the debate, start with these articles
and blog entries (they all have links
to additional points of view):
“On Fixed vs. Liquid Design,” by
Doug Bowman (experimenting
with fixed width design at www.

stopdesign.com/log/2003/12/15/
fixedorliquid.html)
“More on fixed widths,” by Richard
Rutter (pro–liquid design article
at clagnut.com/blog/269/)
“Fixed Fashion,” by Jeremy Keith
(pro–liquid designpost at www.
adactio.com/journal/980)



Page Layout Templates
Chapter 16, Page Layout with CSS
319
Dominant main column
One thing to be aware of is that all of these examples are based on the
best-case scenario where the main content column is longer than the side
column(s), which of course is not always the case in the real world. If your
side columns are longer, you may need to make adjustments or use a dif-
ferent structure altogether.
Color-coding
I’ve included two views of each layout. The one on the left is plain and
simple and shows off the potential of the layout. In the right view, I’ve
added a garish background color to help you match the markup and style
sheet code with what is happening in the browser. The background colors
are also helpful for visualizing the boundaries and placement of element
boxes.
Make it yours
The example style sheets contain the minimum number of rules to create
a flexible and usable page structure. There is obviously a lot more that

could be done with text, backgrounds, margins, padding, and borders to
make these pages more appealing. Once you’ve laid a framework with
these templates, you should feel free to change the measurements and add
your own styles. Values that can be replaced are indicated in italics in the
style sheet examples.
Multicolumn Layouts Using Floats
The most popular way to create a column is to float an element to one side
and let the remaining content wrap around it. A wide margin is used to keep
the area around the floated column clear.
One of the advantages of floats is that it is easier to start page elements such
as a footer below the columned area of the page. The drawback of float-based
layouts is that they are dependent on the order in which the elements appear
in the source. Getting the layout effect you are after may result in the docu-
ment source not being in the optimal order for users of non-visual browsers.
The templates in this section reveal the general strategy for approaching two-
and three-column layouts using floats and should serve as a good head start
toward implementing your own layouts.
More Layout
Templates
and Tutorials
There are many approaches to
creating multicolumn layouts with
CSS. All layouts have benefits and
drawbacks (usually in the form of
browser support). To find a template
that is right for you and to learn
where things are likely to go wrong, I
recommend these resources.
The css-discuss Wiki has a list of
links to two- and three-column

layout tutorials. These pages are
great starting places for more
exploration and solutions to
layout issues:
css-discuss.incutio.com?page=Th
reeColumnLayouts
css-discuss.incutio.com?page=Tw
oColumnLayouts
“Creating Liquid Layouts with
Negative Margins,” by Ryan Brill,
published on
A List Apart
(www.alistapart.com/articles/
negativemargins/)
“In Search of the Holy Grail,” by
Matthew Levine, published by
A
List Apart
(www.alistapart.com/articles/
holygrail/)
“In Search of the One True
Layout,” by Alex Robinson,
published by
Position Is
Everything

(positioniseverything.net/articles/
onetruelayout/)
“3 Column All CSS Layout,” by Ben
Hirsch, published on the Shadow

Fox Network
(www.shadow-fox.net/tutorial/3-
Column-All-CSS-Layout-With-
Fluid-Center-and-Two-Columns)







O n l I n e R e S O U R c e S
More Layout
Templates
and Tutorials
There are many approaches to
creating multicolumn layouts with
CSS. All layouts have benefits and
drawbacks (usually in the form of
browser support). To find a template
that is right for you and to learn
where things are likely to go wrong, I
recommend these resources.
The css-discuss Wiki has a list of
links to two- and three-column
layout tutorials. These pages are
great starting places for more
exploration and solutions to
layout issues:
css-discuss.incutio.com?page=Th

reeColumnLayouts
css-discuss.incutio.com?page=Tw
oColumnLayouts
“Creating Liquid Layouts with
Negative Margins,” by Ryan Brill,
published on
A List Apart
(www.alistapart.com/articles/
negativemargins/)
“In Search of the Holy Grail,” by
Matthew Levine, published by
A
List Apart
(www.alistapart.com/articles/
holygrail/)
“In Search of the One True
Layout,” by Alex Robinson,
published by
Position Is
Everything

(positioniseverything.net/articles/
onetruelayout/)
“3 Column All CSS Layout,” by Ben
Hirsch, published on the Shadow
Fox Network
(www.shadow-fox.net/tutorial/3-
Column-All-CSS-Layout-With-
Fluid-Center-and-Two-Columns)








O n l I n e R e S O U R c e S
Part III: CSS for Presentation
320
Page Layout Templates
Two-column with footer
Method: FLOAT
Layout: LIQUID
The markup and styles in this example produce a liquid two-column layout
with a header area, a main column of content, a sidebar, and footer for copy-
right information as shown in Figure 16-8.
Aqua box indicates floated “main”
div
Footer appears at the bottom of the content
(not at the botom of the browser window)
Figure 16-8. Two-column layout with footer.
The Markup
<div id="header">
Masthead and headline
</div>
A
<div id="main">
Main article
</div>

<div id="extras">
List of links and news
</div>
<div id="footer">
Copyright information
</div>
Markup Notes:
The source document has been divided into four divs, one each for the
header, content, extras, and footer.
Page Layout Templates
Chapter 16, Page Layout with CSS
321
The main content appears before the extras in the source document so
that it is accessed first by users with non-graphical browsers. That means
that we can’t float the “extras” div because it will not float above the pre-
ceding block element to the top of the page. Instead, the main content div
is floated and the following text (the “extras” div) wraps around it.
The Style Sheet
#header {
background: #CCC;
padding: 15px; }
B
#main {
background-color: aqua;
float: left; /* floats the whole main article to the left */
width: 60%;
margin-right: 5%; /* adds space between columns */
margin-left: 5%; }
C
#footer {

clear: left; /* starts the footer below the floated content */
padding: 15px;
background: #CCC; }
D
#extras {
margin-right: 5%} /* space on the right of the side column */
E
body {
font-family: verdana, sans-serif;
margin: 0; /* clears default browser margins */
padding: 0; }
li {
list-style: none;
margin: 10px 0; }
Style Sheet Notes:
The main content div is floated to the left and set to 60% of the page
width. A margin is applied to the left and right sides of the floated “main”
div to add space between columns.
The “footer” div is cleared (with the clear property) so that it starts
below the floated main content column.
A margin is added on the right edge of the “extras” div to add space
between it and the browser window.
The margin and padding on the body element have been set to zero to
clear the default browser settings. This allows the shaded header and
footer areas to go right up to the edge of the browser window without
any white gaps.
A�
B�
C�
D�

E�
Part III: CSS for Presentation
322
Page Layout Templates
Three-column with footer
Method: FLOAT
Layout: FIXED
This example uses floated elements to create a fixed-width three-column lay-
out (a main content column flanked by left and right sidebars) with optional
header and footer (Figure 16-9).
Figure 16-9. Three-column layout using floats.
The Markup Markup Notes
A
<div id="container">
<div id="header">
Masthead and headline
</div>
B
<div id="links">
List of links
</div>
<div id="main">
Main article
</div>
<div id="news">
News and announcements
</div>
<div id="footer">
Copyright information
</div>

</div>
All of the content elements in the docu-
ment have been placed in a “container”
div to which the fixed-width measure-
ment will be applied.
Remember that with floating, the order
that the elements appear in the source
document is significant. To get the
narrow sidebars on either side of the
content, I needed to move the “links”
div before the “content” div to keep
the style sheet straightforward. There
are methods that allow the content to
appear in any order, but they tend to
get complicated. The last three resourc-
es listed in the More Layout Templates
and Tutorials sidebar address this
issue.
A�
B�
Page Layout Templates
Chapter 16, Page Layout with CSS
323
The Style Sheet
#container {
width: 750px;
C
border: solid 1px; }
#header {
background: #CCC;

padding: 15px; }
D
#links {
background-color: fuchsia;
float: left;
E
width: 175px; }
D
#main {
background-color: aqua;
float: left;
E
width: 400px; }
D
#news {
background-color: green;
float: left;
E
width: 175px; }
F
#footer {
clear: both; /* starts the footer below the floated content */
padding: 15px;
background: #CCC; }
body {
font-family: verdana, sans-serif;
font-size: small;
margin: 0;
padding: 0;}
G

h2, ul, p {
padding: 0px 8px; } /* adds space around content */
li {
list-style: none;
margin: 10px 0; }
Style Sheet Notes
A border has been added to the container to reveal its edges in this dem-
onstration, but it can easily be removed.
The style sheet floats the “links” “main,” and “news” divs to the left. The
result is that they accumulate against the left edge of the containing
block, thus creating three columns.
Because there are no padding, border, or margin settings for each floated ele-
ment, the sum of their widths is equal to the width of the outer container.
The clear: both property has been added to the footer to make sure it
starts below all of the floated elements.
Space within each content div is added by applying padding on the ele-
ments it contains (h2, ul, p, etc.).
C�
D�
E�
F�
G�
Part III: CSS for Presentation
324
Page Layout Templates
Now it’s your turn to give it a try. In Exercise 16-1, you’ll use the same content
to create a hybrid of the previous examples: a two-column, fixed-width layout
using floats.
exercise 16-1
|

Float-based Layout
In this exercise, we’ll create the fixed-width layout shown in Figure 16-10. The
source document for this exercise, olympus.html, is available online at www.
learningwebdesign.com/materials/. It contains the basic markup and the start of the
style sheet for all the exercises in this chapter.
Open olympus.html in your text editor and save it as a new file called olympus-
2col.html (that will keep a copy of the starter document fresh for the next
exercise). We’ll start by getting the markup all set. Because this is a fixed-width
layout, wrap all of the content (from the first
h1
to the end of the last paragraph)
in a
div
identified as the “container” (with the
id
attribute) just as we did in the
three-column template earlier. Be sure to include the closing
</div>
tag.
Next, add
div
s that identify the four content sections. Name them “header,” “main,”
“extras,” and “footer.” Note that the “extras”
div
in this example contains both Links
and News.
1.
2.
Figure 16-10. Two-column, fixed-width
layout.

With the markup in place, you can move on to the style
sheet. The
style
element and some basic text formatting
rules have been added for you. Apply a
width
to the
container
div
. This sets the width of the page area. Also,
apply a border to make the boundaries of the page area
clear (you can always remove it later).
#container {
width: 750px;
border: 1px solid; }
Next, let’s make the header and footer stand out. Give
them some padding and a light background color. I’m
using gray, but you can use any color you like.
#header {
padding: 15px;
background: #CCC; }
#footer {
padding: 15px;
background: #CCC; }
Now give the main content
div
a width and float it to
the right to make the second column,
#main {
float: right;

width: 550px;
}
and clear the footer so it appears below the floated
content,
#footer {
clear: both;
padding: 15px;
background: #CCC; }
3.
4.
5.
exercise 16-1
|
Float-based Layout
In this exercise, we’ll create the fixed-width layout shown in Figure 16-10. The
source document for this exercise, olympus.html, is available online at www.
learningwebdesign.com/materials/. It contains the basic markup and the start of the
style sheet for all the exercises in this chapter.
Open olympus.html in your text editor and save it as a new file called olympus-
2col.html (that will keep a copy of the starter document fresh for the next
exercise). We’ll start by getting the markup all set. Because this is a fixed-width
layout, wrap all of the content (from the first
h1
to the end of the last paragraph)
in a
div
identified as the “container” (with the
id
attribute) just as we did in the
three-column template earlier. Be sure to include the closing

</div>
tag.
Next, add
div
s that identify the four content sections. Name them “header,” “main,”
“extras,” and “footer.” Note that the “extras”
div
in this example contains both Links
and News.
1.
2.
Figure 16-10. Two-column, fixed-width
layout.
With the markup in place, you can move on to the style
sheet. The
style
element and some basic text formatting
rules have been added for you. Apply a
width
to the
container
div
. This sets the width of the page area. Also,
apply a border to make the boundaries of the page area
clear (you can always remove it later).
#container {
width: 750px;
border: 1px solid; }
Next, let’s make the header and footer stand out. Give
them some padding and a light background color. I’m

using gray, but you can use any color you like.
#header {
padding: 15px;
background: #CCC; }
#footer {
padding: 15px;
background: #CCC; }
Now give the main content
div
a width and float it to
the right to make the second column,
#main {
float: right;
width: 550px; }
and clear the footer so it appears below the floated
content,
#footer {
clear: both;
padding: 15px;
background: #CCC; }
3.
4.
5.
Page Layout Templates
Chapter 16, Page Layout with CSS
325
Save the document and take a look at it in the browser. It should look almost
like the sample in Figure 16-10. The only problem is that the text is bumping up
against the edges of the columns and the browser. We can fix that. Add margins
on both sides of the floated main column and on the left side of the “extras”

div
.
#main {
float: right;
width: 550px;
margin: 0 10px; } /* adds 0 pixels top/bottom and 10px left/right */
#extras {
margin-left: 10px; }
Save the document again, and take a look. You should have a page that matches
the example.
The layout is officially done, but let’s play around with it a bit to get a better feel
for what’s happening. First, make the background of the “main”
div
yellow by
adding
background-color: yellow;
to the
#main
rule. Save the file and look at it
in the browser. You should see that the color goes behind the content area of the
floated box, but does not extend into the margin area, as expected.
Now, make the background of the “sidebar”
div
red by adding
background-color:
red;
to the
#sidebar
rule. Save the file and look at it in your browser. You will see
that the red background color goes all the way across the page area, behind the

floated column (as shown in Figure 16-11). This is because the sidebar text is just
wrapping around the float. The normal behavior for wrapped text is that the
content moves out of the way of the float, but the element box still takes up its
normal width. The background of the wrapped text appears behind the float. You
may remove the background colors once you’ve gotten the point.
The yellow background
stays in the content area
of the floated “main” div.
The element box of the
“extras” div extends the
width of the page area, as
indicated by the red
background.
Figure 16-11. Adding background colors to reveal element structure.
Obviously, there is more you could do to pretty up this page with color, text
formatting, images, and so on. What is important here is that you get a feel for
creating the structure using floats. Later in the chapter, I’ll show you a trick for adding
colors to columns using a background image. We’ll also learn how to center a fixed-
width layout like this one in the browser window.
6.
7.
8.
9.
N o t e
The margin will be added on the outside
of the 550 pixel-wide content block.
That means that the side column will be
reduced by 20 pixels. If you want the left
and right columns to stay 200 and 550
pixels respectively, you need to reduce the

width of the main div to 530px. We’ll talk
about this more in the final 3-column
template example.
N o t e
The margin will be added on the outside
of the 550 pixel-wide content block.
That means that the side column will be
reduced by 20 pixels. If you want the left
and right columns to stay 200 and 550
pixels respectively, you need to reduce the
width of the main div to 530px. We’ll talk
about this more in the final 3-column
template example.
If things aren’t working, make
sure that you didn’t miss a
semicolon (;) at the end of a
property or a curly bracket (}) at
the end of a rule.
Try saving and viewing the
document after each step to see
the effects of each change that
you make.


e x e R c I S e t I P S
If things aren’t working, make
sure that you didn’t miss a
semicolon (;) at the end of a
property or a curly bracket (}) at
the end of a rule.

Try saving and viewing the
document after each step to see
the effects of each change that
you make.


e x e R c I S e t I P S