Advanced CSS:

Layout
Module 3

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 5
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

CSS
7 Frameworks
8
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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
• 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 - 2 nd Ed.

 Normal Flow
Block-Level Elements

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

 Normal Flow
Inline Elements

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

 Normal Flow
Block and Inline Elements

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

 Span { display : block; }
li { display : inline; }

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

CSS
7 Frameworks
8
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.

Positioning Elements Relative
Positioning

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

Positioning Elements Absolute
Positioning

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

Positioning Elements
Absolute Positioning is relative to nearest positioned ancestor

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

Positioning Elements Z-Index

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

 Positioning Elements
Z-Index

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

Positioning Elements Fixed
Positio
n

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

CSS
7 Frameworks
8
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.

 Floating Elements

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

 Floating Elements
Floating within a Container

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

 Floating Elements
Floating Multiple Items Side by Side

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd Ed.

 Floating Elements
Overlaying and Hiding Element

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

 Floating Elements
Using display

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

 Floating Elements
Comparing visibility with display

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

 Floating Elements
Using Hover with display

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

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

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

 Constructing Multicolumn
Layout
Using Floats to Create Columns

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

 Constructing Multicolumn
Layout
Using Floats to Create Columns

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

 Constructing Multicolumn
Layout
3 column example

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

 Constructing Multicolumn
Layout
3 column example with nested floats

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

 Constructing Multicolumn
Layout
Using Positioning to Create Columns

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

 Constructing Multicolumn
Layout
Problems with Absolute positioning

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

 Constructing Multicolumn
Layout
Solution to footer problem

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

CSS
7 Frameworks
8
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.

 Approaches to CSS
Layout
Fixed Layout

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

 Approaches to CSS
Layout
Problem with Fixed Layout

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

 Approaches to CSS
Layout
Liquid or Fluid 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 - 2 nd Ed.

 Approaches to CSS
Layout
Liquid Layout

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

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

Responsive web design is

about creating web pages
that look good on all
devices!

A responsive web design will

automatically adjust for
different screen sizes and
viewports.

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

 Responsive Design
4 elements

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

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

 Responsive Design
Setting Viewports

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

 Responsive Design
Setting Viewports

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd Ed.

 Responsive Design
Media Queries

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

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

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

 CSS Frameworks and
Preprocessors
Grid in print design

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.

 CSS Frameworks and
Preprocessors
CSS Preprocessors

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

 Chapter 7
1 Normal Flow
2 Positioning
Elements

Constructing
3 Floating
Elements 4 Multicolumn
Layouts

5 Approaches to
CSS Layouts 6 Responsive
Design

CSS
7 Frameworks
8
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
 Summary
Key Terms
• absolute positioning • filters elements

• animations • fixed layout • normal flow

• BEM • fixed positioning • positioning context

• block • flexbox layout • progressive enhancement

• block-element-modifier • float property • relative positioning

• block-level elements • fluid layout • replaced inline elements

• clear property • image placeholder services • responsive design

• containing block • inline elements • style guides

• CSS framework • keyframes • transforms

• CSS media queries • liquid layout • transitions

• CSS preprocessors • modifiers • viewport

• elements • nonreplaced inline • z-index

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