SOLUTION MANUAL FOR HTML5 AND CSS3

ILLUSTRATED INTRODUCTORY 2ND EDITION VODNIK

1305394054 9781305394056
Full download link at:
Solution manual: https://testbankpack.com/p/solution-manual-for-html5-and-css3-illustrated-
introductory-2nd-edition-vodnik-1305394054-9781305394056/
Test bank: https://testbankpack.com/p/test-bank-for-html5-and-css3-illustrated-introductory-2nd-
edition-vodnik-1305394054-9781305394056/

HTML5 and CSS3 – Illustrated, 2nd Edition

Unit D: Laying Out Elements with CSS

A Guide to this Instructor’s Manual:

We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, and Classroom Activities and/or Lab
Activities. Pay special attention to teaching tips, and activities geared towards quizzing your students,
enhancing their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.

For your students:

Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
http://coursecasts.course.com, where they can download the most recent CourseCast onto their
mp3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State
University Computer Science Department where he is responsible for teaching technology
classes to thousands of FSU students each year. Ken is an expert in the latest technology and
sorts through and aggregates the most pertinent news and information for CourseCasts so your
students can spend their time enjoying technology, rather than trying to figure it out. Open or
close your lecture with a discussion based on the latest CourseCast.

Unit Objectives 2
84: Assess the CSS Box Model 2
86: Set Element Widths and Borders 4
88: Set Margins and Padding 5

PPT 1.1
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 2 of 15

90: Align Elements with Float 6

92: Control Page Flow with Clear 7
94: Implement Fixed Positioning 9
96: Implement Relative Positioning 10
98: Control Stacking order 11
100: Implement Absolute Positioning 13
End of Unit Material 14
Glossary of Key Terms 15

Students will have mastered the material in Unit D when they can:
 Assess the CSS box model  Implement fixed positioning
 Set element width and borders  Implement relative positioning
 Set margins and padding Control stacking order
 Align elements with float  Implement absolute positioning
 Control page flow with clear

LECTURE NOTES
 Introduce the CSS box model, explaining that CSS represents every web page element using the box,
which treats each element as a rectangular box having several global properties. Use TABLE D-1 to
discuss these properties.
 Point out that padding, border and margin are all used to create space around the contents of a web
page element. Be sure students understand that they are not the same but that they are related to
each other.
 Explain that the border property is the only one that can be seen on a web browser, as it is
formatted with width, style, and color specified by the user. Point out that you can make a border
invisible by using the name-value pair "border: 0;".
 Discuss how the border serves as a reference point for the padding and margin properties.
 Define padding as the space inside a border between the border and the element content. You can
use FIGURE D-1 to demonstrate.
 Define margin as the space outside the border between the border and adjacent or parent elements.
You can use FIGURE D-1 to demonstrate.
 Point out that although the size of the padding, border, and margin increase the amount of space
that an element influences on a web page, the dimensions of these properties are generally not
included in the calculated width or height of an element.
 Explain that the width and height of an element as specified in CSS apply to the element content
only, and that values specified for padding, border, and margins are added to the specified width
and/or height.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 3 of 15

 Demonstrate to students how to properly calculate the dimensions of an element, so that the
element, together with the surrounding padding, border, and margin, will fit in the designated
space or area. You can use FIGURE D-2 as a visual guide for this.
 Explain the concept of margin collapse, which means that when the bottom margin of one element
is adjacent to the top margin of another element, the margins combine into a single margin with the
size of the greater of the two combined margins. Point out that this behavior should be considered
when calculating the space taken up by elements.
 Provide an example of how properties can be combined when they are given a common value.
Emphasize the use of generic properties rather than specific properties for this purpose.
 Discuss the units of measure, including pixels (px), ems (em), percent (%), and rems (rem), using the
TABLE D-2 as your guide. Be sure students understand the difference between relative units and
absolute units.
 Point out that shorthand may be used even if the properties are not all given a common value.
Explain how web browsers interpret such shorthand when there are four values provided for a
specific property and when only two or three values are provided for a property.

TEACHER TIP
Point out to students that margins can be set to three different value types:
 auto – allows the browser to set the margin, and gives the designer less control over the exact
layout of the web page.
 length – defines a fixed margin, specified in pixels, em, and so on.
 % - defines the margin as a percentage of the containing element.

FIGURES: D-1, D-2

TABLE D-1: Box model Properties

TABLE D-2: Commonly used CSS units of measure

BOXES:
1. Quick Tip: A declaration of border:0; means that the border for the affected element is not
visible and takes up no space.
2. Quick Tip: Relative units are useful when you want to calculate the size of document
content based on other elements, while absolute units are best for elements that need to
keep specific dimensions.
3. Quick Tip: To calculate an element’s total vertical space, you add the height value to the
padding, border, and margin values.

CLASSROOM ACTIVITIES
1. Critical Thinking: Consider a web page that includes multiple elements with the name-value pair
"border: 0;". You want to define a distance of 4em between every two such elements. Do you think it is
best to use only margin to set this distance, only padding, or a combination of both? What are the
advantages of the way you suggest?
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 4 of 15

2. Critical Thinking: You are creating a website that has three theme colors, red, green, and blue, for a
company named TriCol. The owner wants the logo of the company to be surrounded by three adjacent
rectangles, one in each of the three theme colors, such that the red rectangle is closest to the logo, the
green rectangle surrounds the red rectangle, and the blue rectangle surrounds the green one. How can
you accomplish this? (Hint: nested elements)

LECTURE NOTES:
 Explain to students that to set box properties for web page elements, they need to create
declarations that assign values to the properties.
 Discuss shorthand properties and point out that margin, border, and padding are shorthand
properties because they assign values to multiple CSS properties, in this case the box model.
 Explain that they can set the box model properties for all four sides of an element with a single
declaration.
 Discuss how CSS also supports specific properties to set the border, or the padding of one particular
side, as well as the width, style, or color of the border of a particular side of an element. Use TABLE
D-3 to discuss specific properties for components of the box model.
 Define a reset rule as one that resets one or more common properties of multiple elements to a
common baseline, ensuring that default values that may be different between browsers, do not
cause a web page to be displayed inconsistently.
 Point out that when the set the value of a CSS property to 0, there is no need to specify a unit.

TEACHER TIP
Point out when multiple selectors are used, it is common to list the selectors in alphabetical order.
Explain that using this system makes it easy to check and be sure a selector is included in a long list
of selectors.

FIGURES: D-3, D-4

TABLE D-3: Specific properties for components of the box model

BOXES:
1. Quick Tip: The h1 content includes the <br> tag, which is a single-sided tag that creates a line
break.
2. Trouble: As you enter code, refer to the figures as needed to help you verify the placement of
the code you are typing.
3. Quick Tip: In a style rule that uses multiple type selectors, it’s common to list the selectors in
alphabetical order.
4. Trouble: If you’re using IE and your document does not match FIGURE D-4, click the Settings
button(IE11) or click Tools on the menu bar (IE10), click Compatibility View settings, uncheck
“Display intranet sites in Compatibility View,” click Close, then refresh the page.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 5 of 15

CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F The margin, border, and padding properties are also known as shorthand properties. (T)
b. T/F A border is never visible. (F)
c. T/F When you set the padding of an object, you must set the padding for all four sides. (F)

2. Classroom Discussion: Have students define reset rule. Then discuss which properties they might
want to create reset rules for and why. Have students describe what they think will have to a web page
where reset rules have not been applied when the web page is opened using different browsers or
different versions of the same browser.

LAB ACTIVITY
1. Provide students a simple web page with elements that have borders set that are visible and those
that are not visible. Have students use their browsers developer tools to identify the border setting
for several elements in the web page. Have them also explain the settings used to make some of the
borders visible.

LECTURE NOTES
 Explain that you can set different margin and padding values for different sides of an element by
assigning multiple values.
 Use TABLE D-4 to explain the different margin and padding values, including the use of the
shorthand property.
 Point out that in addition to number values, the margin property supports the value auto. Explain
that when auto is assigned to the left and right margins of an element, that element is centered
horizontally within its parent element.

TEACHER TIP
Take time to discuss TABLE D-4 with students and to have them give examples for padding and
margin that use one to four values. Be sure students can explain how their values affect the margin
or padding of the element.

FIGURES: D-5, D-6

TABLE D-4: Interpretation of different numbers of values for the margin and padding shorthand
properties

BOXES:
1. Quick Tip: When completing the steps in this book, enter each declaration on its own line.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 6 of 15

2. Quick Tip: When specifying a decimal value less than 1, it’s standard to include a leading 0 for
legibility.
3. Quick Tip: Your code will be a continuous column of code; the code in FIGURE D-6 has been
split into two columns to make it easier to read.
4. Trouble: Although calculated values sometimes result in decimal amounts, some browsers omit
the decimals in the developer tools.

CLASSROOM ACTIVITIES
1. Critical Thinking: Have students look at FIGURE D-6. Ask them to identify elements on the page and
talk about the margin and padding values that might have been used for that element. Ask students to
explain when they might want to apply a margin or padding value to only one side of an element. Ask
students to give examples of when they might use each of the value structures (1 – 4) presented in
TABLE D-4.
2. Quick Quiz:
a. T/F You must apply the same margin value to all four sides of an element. (F)
b. T/F When you use three values to set margins, the middle value applies to the left and
right margins. (T)
c. T/F You use the auto value for left and right margins to center an element vertically with
its parent element. (F)
d. T/F When your declaration includes more than one value for margin setting, you separate
the values using commas. (F)

LECTURE NOTES
 Explain that by default, a browser renders elements in a web document in the order they appear,
with most elements displayed below the element that precedes them. Explain that this default
arrangement of elements is known as normal flow.
 Discuss why this makes it simple to create layouts that stack elements vertically, but more
complicated to create layouts with multiple vertical columns.
 Point out that the float properties can be used to wrap elements around an element rather than be
stacked below it.
 Explain the importance of setting margin and padding to 0 for commonly used elements to ensure
precise values are specified for all the page elements rather than relying on browser defaults which
can vary between user agents.
 Demonstrate how setting the float property of some elements to one side, causes the other elements
to flow around them.
 Point out that the left and right values of the float property align the element horizontally with the
left or right edge of the parent element respectively, which allows other elements to fill in the
remaining horizontal space. Use FIGURE D-7 to help illustrate this concept.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 7 of 15

 Explain that making some elements float to the right, while others float to the left, and using the
width property to define the width of each element creates the appearance of two columns.

TEACHER TIP
Point out that laying out content in floated columns has immediate benefits, such as progressive
downloading.

FIGURES: D-7, D-8, D-9

BOXES:
1. Quick Tip: Because the article and aside elements have no padding, borders, or margins, setting
their widths to 70% and 30% makes them fit exactly within their parent element.
2. Quick Tip: You’ll adjust the appearance of the footer element in the next lesson to prevent it
from overlapping the article content.

1. Quick Quiz:
a. T/F You can create a layout including more than two columns using the float property. (T)
b. T/F Browsers render HTML left to right. (F)
c. T/F You use the wrap property when you want elements to wrap around another element.
(F)

2. Classroom discussion: Provide students with examples of different layouts, and discuss how each of
the layouts can be achieved using tables. Have students try to come up with ways to achieve the same
layout using floating elements.

LAB ACTIVITY
1. Provide students with a web page that includes multiple elements of varying sizes displayed in
stacked order, similar to the left image in FIGURE D-7. Ask students to recreate the provided
page layout in a web page using floating elements and the width property of these elements to
create a page where the elements wrap.

LECTURE NOTES
 Review the float property with students, reminding them how it is used to wrap elements around
another element.
 Explain that sometimes the float property is not enough to create the layout they want.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 8 of 15

 Point out that sometimes they may want to ensure that a specific element follows a floated element
rather than wrapping around the element. Explain that in this type of situation, they need to use
the clear property.
 Tell students the clear property helps them control the flow of objects even more precisely.
 Describe how the clear property is used to prevent floated elements from being displayed to the left,
right, or on either side of another element.
 Use TABLE D-5 to go over the values used with the clear property.
 Be sure to explain to students how they can use the float property to create multicolumn layouts.
 Also explain what to do if an element’s content extends beyond the bottom of its container element.

TEACHER TIP
Make sure students can explain the clear values in their own words. Have them describe the
elements in FIGURE D-10 and FIGURE D-12 using float and clear.

FIGURES: D-10, D-11, D-12

TABLE D-5: Values of the clear property

BOXES:
1. Clues to Use: Creating multicolumn layouts with float
Some of the most widely used layouts in print media involve columns of text and graphics
running parallel to each other down the page. You can use the float property to create a basic
version of this arrangement, known as a multicolumn layout. To build a two-column layout,
you float an element containing one column of content, and either allow the other column to
remain in the normal flow, or float it on the other side. To create the appearance of even
columns, the column with more content should be floated and assigned a distinct background
color, and the other column should use the background color of the parent element rather than
specifying its own. To create a three-column layout, you float an element that will serve as one
column on the left, float another element on the right, and allow the element that will be the
middle column to remain the normal flow.
Remember that a floated element must come before an element that runs alongside it in
your HTML code, and it’s important not to change the order of elements in HTML simply for
presentational purposes. If the semantic order of your HTML code doesn’t lend itself to creating
the desired layout using the float property, you should instead consider using the position
property, which is covered later in this unit.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 9 of 15

2. Clues to Use: Dealing with floated content that’s longer than its parent element
An element’s content can extend below the bottom of its container element, especially when
the content of a floated element is longer than other elements on a page. When a floated
element is followed by another element in the normal flow, the clear property can be useful in
extending the formatting of the parent element to all the content within it. However, in some
cases the order of elements in HTML code does not lend itself to this layout. In these cases, you
can add the declaration overflow: auto; to the parent element to extend it horizontally to give
the appearance of the floated element still being in the normal flow.
In some browsers, this declaration results in a scroll bar being displayed on the right side of
the parent element, which some designers find unsightly. Other approaches to solving this same
problem that use more advanced CSS tools are in wide use. One popular method, known as a
clearfix, is detailed at http://css-tricks.com/snippets/css/clear-fix/.

CLASSROOM ACTIVITIES
1. Critical Thinking: Have students think about using a table to create a multicolumn layout and using
the float property to create a multicolumn layout. What are the advantages and disadvantages of each?
Why? Which is the preferred CSS3 method?
2. Quick Quiz:
a. T/F With the float property, you have no control over the placement of objects. (F)
b. T/F You can clear a float on a page. (T)
c. T/F You can use the clear property to change a floated element to a non-floated element.
(F)
d. T/F The column property is used to create multicolumn layouts. (F)

LECTURE NOTES
 Explain that the position property lets students more precisely specify where an element should be
positioned on a web page.
 Mention that CSS supports fixed positioning, relative positioning, absolute positioning, and static, as
described in TABLE D-6.
 Explain that an element with fixed positioning is displayed at the top of the stacking order and it is
positioned relative to the browser window rather than to a web page element. As a result, fixed
positioning causes an element to remain in the same location in a browser window as a user scrolls
through the web page.
 Point out that fixed positioning of an element can be useful for information or tools that users may
need at any point on a long web page.
 Tell students that to implement fixed positioning, they use the position property with the fixed
value, and then they specify a either a horizontal position using the left or right property or a
vertical position using the top or bottom property, as described in TABLE D-7.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 10 of 15

TEACHER TIP
Discuss with students which elements might benefit from fixed positioning and why.

FIGURES: D-13, D-14, D-15

TABLE D-6: Commonly used values of the position property
TABLE D-7: CSS properties and values used in fixed positioning

BOXES:
1. Quick Tip: You can generate lorem ipsum text using many free online services, such as
lipsum.com.

CLASSROOM ACTIVITIES
1. Critical Thinking: Discuss fixed positioning with students, especially which elements it might be
suitable for. Then have students name some problems that might come up for users when elements are
placed using fixed positions.
2. Quick Quiz:
a. If you want an element to remain in the same position in the browser window while a user
scrolls the page, you can use the __________ property with a value of __________. (Answer:
position, fixed)
b. T/F Fixed positioning keeps an element in the normal flow. (F)
c. T/F You can use the position property to more precisely place elements on a web page. (T)

LECTURE NOTES
 Use FIGURE D-16 to provide an overview of the concept of relative positioning, which allows
developers to make adjustments to the default position of an element while preserving the space
allotted to the element in the normal flow.
 Explain that to implement relative positioning students need to set the position property to relative.
 In addition to using the position property, tell students they also must specify how far to move the
element from its default location by using the left or right property to change the horizontal
location or the top or bottom property to change the vertical location, as described in TABLE D-8.

TEACHER TIP
Point out to students that to override an inherited position property and position the element as it
would be automatically by the browser, they can set the position property to "static".

FIGURES: D-16, D-17, D-18

HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 11 of 15

TABLE D-8: CSS properties and values used in relative positioning

BOXES
1. Quick Tip: While horizontal and vertical positions can sometimes be calculated, it’s often a
process of trial and error to arrive at the correct values.
2. Clues to Use: Maintaining accessibility with positioning
When you alter the layout of your web pages using positioning, it’s important to plan for non-
visual user agents, as well as devices with smaller screens, to make sure your page content still
flows logically. User agents that don’t process positioning continue to render all content from
top to bottom in the document. Thus, your HTML code should contain elements in the order
users will encounter them. In addition, you can help all user agents understand the content of
your pages and present it appropriately by using semantic elements to indicate the content of
different columns; for instance, nav for the nav bar, aside for a sidebar, and article for main page
content.

CLASSROOM ACTIVITIES
1. Critical Thinking: Can implementing relative positioning cause elements to overlap? Explain why or
why not. How can you deal with such overlap if it occurs?
2. Quick Quiz:
a. T/F The distances provided in relative positioning are relative to the edges of the screen. (F)
b. T/F To provide relative positioning, you should use the CSS position property with a value of
relative. (T)

LAB ACTIVITY
1. Provide students with an HTML document that includes multiple elements but not positioning
information and with a page layout in which the elements listed are not in their default page
flow positions. Have students create a CSS style sheet that recreates the provided page layout
using the provided HTML document using relative positioning.

LECTURE NOTES
 Explain that when using positioning, two elements can occupy the same space on a web page.
 Provide an overview on the ability to stack elements, thereby introducing many additional layouts
to a web page. Point out that this requires careful planning in order to avoid making the web page
unclear.
 Explain that a positioned element is placed in a new layer, which is displayed on top of the basic
page flow layer. Use FIGURE D-19 to discuss stacking elements.
 Demonstrate how to control the stacking order of positioned elements by assigning values to the z-
index property for each element. Explain how these values should be calculated.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 12 of 15

TEACHER TIP
Point out that if two positioned elements overlap and a z-index is not specified, the element
positioned last in the HTML code will appear on top. Otherwise, elements with greater z-index
values are in front of elements with lower z-index values.

FIGURES: D-19, D-20, D-21

BOXES
1. Quick Tip: Values for the z-index property can be any number, including a negative number.
Stacking order is based solely on which element has a larger z-index value, not on the actual
value.
2. Clues to Use: Understanding stacking context
Controlling stacking order with the z-index property is straightforward in many cases.
However, in some situations, it’s important to understand some of the finer details of the
property in order to achieve the results you want. The z-index property determines stacking
order based on a stacking context, which is the element containing elements to be stacked.
When stacking sections of a page, stacking order works pretty predictably, as all elements share
a stacking context—the html element. However, when both a parent and child element are
positioned, you cannot use the z-index property to stack the child element above another
element on the page. This is because the stacking context for this child element is its parent
element, rather than the html element containing all page contents. You can learn more about
the details of stacking context and strategies for working with it at developer.mozilla.org/en-
US/docs/Web/Guide/CSS/ Understanding_z_index.
3. Clues to Use: Evaluating website layout types
By default, web page content occupies the entire width of a user’s browser window. When most
users accessed the web with a desktop computer, designers often used a static layout, which
specifies a fixed width for the web page content. However, a static layout that’s sized
appropriately for a desktop computer often doesn’t fit on the screen of a smaller device such as a
smartphone. Designers for some websites find that setting a fixed width and expecting users to
scroll and/or zoom to view the entire page is still their best option. However, many other sites
have replaced static layouts with fluid layouts—also known as liquid layouts—in which the
content size is constrained with the min-width and max-width properties and the columns are
sized using percentages. A liquid layout fills the width of whatever window it’s displayed in, up
to the maximum width limit. This allows designers to take advantage of larger screens on
desktop computers while still making the entire width of the site viewable on a handheld
device.

CLASSROOM ACTIVITIES
1. Critical Thinking: You are creating a website for a historical society, and they want you to annotate a
map of the Shenandoah Valley to indicate the locations of Civil War battles that took place in the
valley. The location of each battle should be indicated by an X of a specified color. Can you achieve this
without making changes to the original map by using stacked elements? Explain why or why not.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 13 of 15

2. Quick Quiz:
a. T/F The element with the lowest z-index value is the forward most element. (F)
b. T/F z-index values must be positive numbers in the range 1-100. (F)
c. T/F A positioned element is placed in a new layer. (T)

LECTURE NOTES
 Explain that absolute positioning takes an element out of the page flow and allows other elements to
flow into the space it would have occupied.
 Demonstrate how to implement absolute positioning by applying the position property and setting
it to "absolute".
 Point out that a new location of an element can be specified relative to its default location. Use
TABLE D-9 to discuss the CSS properties and values used with absolute positioning.
 Explain that the location of an absolutely positioned element is calculated based on the closest
ancestor element that has a position applied to it. Therefore, you sometimes need to set the position
of some elements to relative without actually changing their position in order to have an anchor
element for providing an absolute position for a child element.
TEACHER TIP
In order to make it possible to provide absolute positioning for any element in a page, you can add
the position property to the body element, thereby providing a positioned ancestor element for all
page elements.

FIGURES: D-22, D-23, D-24, D25

TABLE D-9: CSS properties and values used in absolute positioning

BOXES
1. Quick Tip: If you want to position an element in relation to an ancestor element that is not
positioned, you can add the declaration position: relative; to the ancestor element. Without top,
right, bottom, or left values, the ancestor element remains in its original position but serves as
the reference point for absolutely positioning its descendant element
2. Clues to Use: Creating a cohesive website
All the pages on a website should be visually similar enough that users can tell that they’re on
the same site. Visual design, including a color scheme and logo, plays an important role. In
addition, page elements, such as headings and sidebars, should appear in a consistent place on
every page. Your website designs should also make use of elements that are standard on most
other websites, making your website instantly familiar to even first-time visitors. Thus, an
important part of creating a new web design is exploring other websites sharing similar
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 14 of 15

audiences or topics to get a clear understanding of the standard elements that users may expect
to see.

CLASSROOM ACTIVITIES
1. Classroom discussion: Have students discuss the advantages and disadvantages of absolute
positioning vs. relative positioning. Is it possible to achieve every layout using only one of the
positioning schemes? Is it useful to combine both positioning styles in a single web page? When
would it be good to use a combination?

2. Quick Quiz:
a. T/F The space an absolutely positioned element would have occupied in the original page
flow remains empty. (F)
b. T/F When specifying an absolute position, you can use the right and bottom properties, as
well as the left and top properties. (T)
c. T/F You must clear all elements before you use absolute positioning. (F)

LAB ACTIVITY
1. Provide students with an HTML document that includes multiple elements but not positioning
information and with a page layout in which the elements listed are not in their default page
flow positions. Have students create a CSS style sheet that recreates the provided page layout
using the provided HTML document using absolute positioning.

Concepts Review – Includes screen identification, multiple choice, and matching questions.

Skills Review – Provides additional hands-on exercises that mirror the progressive style of the lesson
material.

Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.

Independent Challenge 4: Explore – Using a real world focus to apply the unit skills, students
perform tasks or create documents that will benefit their everyday lives.

Visual Workshop – a practical, self-graded capstone project that requires independent problem
solving.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit D Page 15 of 15

absolute positioning (100) percent (85)

absolute units (84) pixel (85)
border (84) relative positioning (96)
box model (84) relative units (84)
collapse (84) rem (85)
em (85) reset rule (86)
fixed positioning (94) shorthand property (86)
layer (98) stack (98)
margin (84) stacking context (98)
normal flow (90) static layout (94)
padding (84)

Top of Document