Advanced CSS:

Layout

Chapter 7

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Normal Flow

To understand CSS positioning and layout, it is

essential that we understand this distinction as well as
the idea of normal flow:
how the browser will normally display block-level
elements and inline elements from left to right and
from top to bottom

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Normal Flow

• Block-level elements such as <p>, <div>, <h2>,

<ul>, and <table> are each contained on their own
line.
• Inline elements do not form their own blocks but
instead are displayed within lines.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Normal Flow
Block-Level Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Normal Flow
Inline Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Normal Flow
Block and Inline Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements

• absolute The element is removed from normal flow

and positioned in relation to its nearest positioned
ancestor.
• fixed The element is fixed in a specific position in
the window even when the document is scrolled.
• relative The element is moved relative to where it
would be in the normal flow.
• static The element is positioned according to the
normal flow. This is the default.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements
Relative Positioning

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements
Absolute Positioning

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements
Absolute Positioning is relative to nearest positioned ancestor

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements
Z-Index

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements
Z-Index

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Positioning Elements
Fixed Position

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Floating within a Container

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements

It is possible to displace an element out of its position

in the normal flow via the CSS float property
• An element can be floated to the left or floated to
the right .
• it is moved all the way to the far left or far right of
its containing block and the rest of the content is
“reflowed” around the floated element

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Floating within a Container

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Floating Multiple Items Side by Side

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Floating Multiple Items Side by Side

Thankfully, you can stop elements from flowing

around a floated element by using the clear property

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Clear property

• left The left-hand edge of the element cannot be

adjacent to another element.
• right The right-hand edge of the element cannot be
adjacent to another element.
• both Both the left-hand and right-hand edges of the
element cannot be adjacent to another element.
• none The element can be adjacent to other
elements.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Containing Floats

Another problem that can occur with floats is when an

element is floated within a containing block that contains
only floated content. In such a case, the containing block
essentially disappears

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Overlaying and Hiding Element

One of the more common design tasks with CSS is to

place two elements on top of each other, or to
selectively hide and display elements
In such a case, relative positioning is used to create
the positioning context for a subsequent absolute
positioning move.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Overlaying and Hiding Element

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Using display

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Comparing visibility with display

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Floating Elements
Using Hover with display

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Using Floats to Create Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Using Floats to Create Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Using Floats to Create Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
3 column example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
3 column example with nested floats

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Using Positioning to Create Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Problems with Absolute positioning

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Solution to footer problem

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
Using Flexbox to Create Columns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
The flexbox parent (container) properties

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Constructing Multicolumn Layout
The flexbox child (item) properties

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Approaches to CSS Layout
Fixed Layout

In a fixed layout , the basic width of the design is set

by the designer, typically corresponding to an “ideal”
width based on a “typical” monitor resolution.
The advantage of a fixed layout is that it is easier to
produce and generally has a predictable visual result.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Approaches to CSS Layout
Fixed Layout

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Approaches to CSS Layout
Problem with Fixed Layout

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Approaches to CSS Layout
Liquid Layout

liquid layout (also called a fluid layout) widths are not

specified using pixels, but percentage values
advantage of a liquid layout is that it adapts to
different browser sizes
creating a usable liquid layout is generally more
difficult than creating a fixed layout

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Approaches to CSS Layout
Liquid Layout

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Responsive Layouts

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
4 elements

1. Liquid layouts
2. Setting viewports via the <meta> tag
3. Customizing the CSS for different viewports using
media queries
4. Scaling images to the viewport size

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Setting Viewports

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Setting Viewports

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Media Queries

A media query is a way to apply style rules based on

the medium that is displaying the file

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Media Queries

• width Width of the viewport

• height Height of the viewport
• device-width Width of the device
• device-height Height of the device
• orientation Whether the device is portrait or
landscape
• color The number of bits per color

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Media Queries

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Responsive Design Patterns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Responsive Design Patterns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Responsive Design Patterns

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Scaling Images

• img {
max-width: 100%;
}
• <picture>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Responsive Design
Scaling Images

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Filters, Transitions, and Animations
Filters

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Filters, Transitions, and Animations
Filters

#someImage {
filter: grayscale(100%);
/* At time of writing, Chrome and Opera needs
prefix */
-webkit-filter: grayscale(100%);
}
#anotherImage {
/* multiple filters are space separated */
filter: blur(5px) hue-rotate(60deg) saturate(2);
-webkit-filter: blur(5px) hue-rotate(60deg)
saturate(2);
}

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Filters, Transitions, and Animations
Transitions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Filters, Transitions, and Animations
Transitions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Filters, Transitions, and Animations
Transitions vs animations

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Filters, Transitions, and Animations
Animations

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 CSS Frameworks and Preprocessors
CSS Frameworks

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 CSS Frameworks and Preprocessors
Grid in print design

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 CSS Frameworks and Preprocessors
Using Bootstrap

<head>
<link href="bootstrap.css” rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
left column
</div>
<div class="col-md-7">
main content
</div>
<div class="col-md-3">
right column
</div>
</div>
</div>
</body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 CSS Frameworks and Preprocessors
CSS Preprocessors

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

Filters,
7 8
CSS Frameworks
Transitions, and and Preprocessors
Animations
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 7 cont.
9 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Summary
Key Terms
• absolute positioning • filters • normal flow

• animations • fixed layout • positioning context

• BEM • fixed positioning • progressive

enhancement
• block • flexbox layout
• relative positioning
• block-element-modifier • float property
• replaced inline elements
• block-level elements • fluid layout
• responsive design
• clear property • image placeholder
services • style guides
• containing block
• inline elements • transforms
• CSS framework
• keyframes • transitions
• CSS media queries
• liquid layout • viewport
• CSS preprocessors
• modifiers • z-index
• elements
• nonreplaced inline
elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Questions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.