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.
