Home > Chapter Review and Exercises > Chapter 15 - Floating and Positioning
Floating and positioning, until recently, were the primary tools for achieving columned page layouts; however, that approach is obsolete now that better layout tools (Flexbox and Grid) are available. Float- and Position-based layouts may still be used as a fallback for browsers that do not support the newer methods (mainly Internet Explorer 8).
This is the first chapter that addresses moving element boxes around to break out of the normal document flow.
Floating moves an element to the left or right and allows following text to flow around it.
Positioning lifts up the element and places it in another position.
In Chapter 15, you will learn the following:
The characteristics of the normal flow: block elements stack up and fill the available width of the window or other containing element, and inline elements line up next to one another to fill the width of block elements.
Using the float property to shift an element to the left or right and allow text to flow around it.
The behavior of floated inline and block elements.
Ensuring an element begins below a floated element (i.e., stops wrapping) with the clear property.
What happens when multiple elements are floated on the same page or within one element.
How to use the shape-outside property to give text wraps more interesting shapes (circular, elliptical, along a path, or using an image).
The four primary types of positioning:
static (the default)
relative (to its original position)
absolute (positioned with coordinates)
fixed (stays in one position in the viewport)
How elements are positioned relative to their containing blocks. If they are not contained within another positioned element, then the html element forms the initial containing block.
Specifying position with top, right, bottom, and left properties.
Controlling how positioned elements stack up and overlap using the z-index property.
floating
Moves an element as far as possible to the left or right and allows the following content to flow around it.
clearing
Preventing an element from appearing next to a floated element and forcing it to start against the next available “clear” margin edge.
float containment
A technique for expanding or holding open a containing element when all of its children have been floated and removed from the normal flow.
CSS shapes
Non-rectangular wrap shapes around a floated element specified with the shape-outside property.
static positioning
Elements are positioned as they appear in the normal document flow (the default).
relative positioning
Moves the box relative to its initial position in the flow.
absolute positioning
Removes the element from the document flow and positions it with respect to the viewport or other containing element box.
fixed positioning
Stays in one position in the viewport as the document scrolls.
sticky positioning
The positioned element behaves as though it is relatively positioned until it is scrolled to a position relative to the viewport, at which point it remains fixed.
containing block
The box relative to which the position of an element is calculated. The containing box could be a positioned ancestor element or the html element (viewport).
z-index
Defines the stacking order for overlapping positioned elements.
15-1: Floating images
Back to the Black Goose Bakery page, you will use the float property to allow text to flow around the photos on the page.
15-2: Adding shapes around floats
You will add shaped wraps around the bread and muffin images.
15-3: Absolute positioning
This exercise uses absolute positioning to add an award graphic to the top of the home page.
15-4: Fixed positioning
The positioning type for the award graphic is changed from absolute to fixed, and the different behavior can be observed.
1. Which of the following is not true of floated elements?
a. All floated elements behave as block elements.
b. Floats are positioned against the padding edge of the containing element.
c. The contents of inline elements flow around a float, but the element box is unchanged.
d. You must provide a width property for floated block elements.
2. Which of these style rules is incorrect? Why?
a. img { float: left; margin: 20px;}
b. img { float: right; width: 120px; height: 80px; }
c. img { float: right; right: 30px; }
d. img { float: left; margin-bottom: 2em; }
3. How do you make sure a footer element always starts below any floated sidebars on the page?
4. Write the name of the positioning method or methods (static, relative, absolute, or fixed) that best matches each of the following descriptions.
a. Positions the element relative to a containing block.
b. Removes the element from the normal flow.
c. Always positions the element relative to the viewport.
d. The positioned element may overlap other content.
e. Positions the element in the normal flow.
f. The space the element would have occupied in the normal flow is preserved.
g. The space the element would have occupied in the normal flow is closed up.
h. You can change the stacking order with z-index.
i. Positions the element relative to its original position in the normal flow.