6.S082 Lecture 9 Layout

Topics for today

Finish Cascading & Inheritance
Positioning
Floats
Grid Systems
One-dimensional layout

Positioning

How do we break out of the flow and lay elements over others?

<main>
				<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
				<div class="highlighted">
					<p>Sit on the laptop i will be pet i will be pet and then i will hiss, refuse to drink water except out of someone's glass or cough furball for run up and down stairs cats go for world domination suddenly go on wild-eyed crazy rampage.</p>
				</div>
				<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
				<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
				<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
				<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
				<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
				<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
				<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>
			</main>

Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place regardless of scrolling.
The position property controls which positioning scheme is used. Its initial value is static, which corresponds to the default document flow.
What do you notice when position: absolute is applied?
To control the element offsets, we use the top, right, bottom, left properties.
These are relative to the element’s containing block. By default, this is the initial containing block, a rectangle with the same dimensions as the viewport, anchored to the top of the document.

position: absolute takes elements out of normal flow and places them over everything else

Use the offset properties (top, right, bottom, left) to control the placement of absolutely positioned elements

<div class="notice">
				<button class="close">❎</button>
				<p>hiiiiiiiiii feed me now or leave fur on owners clothes eat the rubberband the cat was chasing the mouse. I love cuddles hide head under blanket so no one can see yet meow to be let in yet love me! but the dog smells bad.</p>
			</div>
			<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
			<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
			<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
			<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
			<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
			<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
			<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>

First view:

Side note: all: unset resets all CSS properties to their initial or inherited values (depending on whether they are inherited). Useful for undoing UA styles in one fell swoop!
Here we want to position the close button relative to the notice, but the top and right offsets we try are relative to the top and right of the viewport. What can we do?
position: relative makes this element the containing block of any positioned descendants, i.e. the element the offset properties count from.
What happens if we need to position the notice absolutely? That works too! In fact, any value other than static makes the element the containing block
Can we center the absolutely positioned notice in the viewport? Let's try top: 50%; left: 50%;. What happens?
z-index controls which element is on top of what. Its initial value is auto which corresponds to source order.

Second view:

Note that when we scroll the notice moves. What if we want it to stay in the same place?
position: fixed to the rescue! It's just like absolute but the containing block is the viewport. This has the effect of the element staying in the same place during scrolling.

Terminology
Positioned element is any element with `position` != `static`

Any positioned element is a containing block of any positioned descendants
= that's where top, right, bottom, left count from

Read more about the containing block on MDN

position: fixed allows us to position elements in the same place regardless of scrolling

<p>hiiiiiiiiii feed me now or leave fur on owners clothes eat the rubberband the cat was chasing the mouse. I love cuddles hide head under blanket so no one can see yet meow to be let in yet love me! but the dog smells bad.</p>
			<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
			<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
			<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Role</th>
						<th>MIT Email</th>
						<th>Office</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>David Karger</td>
						<td>Instructor</td>
						<td>karger</td>
						<td>32G-592</td>
					</tr>
					<tr>
						<td>Lea Verou</td>
						<td>Instructor</td>
						<td>leaverou</td>
						<td>32G-598</td>
					</tr>
					<tr>
						<td>Farnaz Jahanbakhsh</td>
						<td>TA</td>
						<td>farnazj</td>
						<td>32G-598</td>
					</tr>
					<tr>
						<td>Luke Murray</td>
						<td>TA</td>
						<td>lsmurray</td>
						<td>32G-596</td>
					</tr>
					<tr>
						<td>Jumana Almahmoud</td>
						<td>TA</td>
						<td>jumanam</td>
						<td>32G-598</td>
					</tr>
				</tbody>
			</table>
			<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
			<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
			<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
			<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
			<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>
			<p>Wake up human for food at 4am stand with legs in litter box, but poop outside or cat sit like bread see owner, run in terror. Making sure that fluff gets into the owner's eyes destroy couch as revenge but hit you unexpectedly, present belly, scratch hand when stroked in the middle of the night i crawl onto your chest and purr gently to help you sleep if it fits, i sits and going to catch the red dot today going to catch the red dot today. Play riveting piece on synthesizer keyboard spill litter box, scratch at owner, destroy all furniture, especially couch and kitty scratches couch bad kitty roll on the floor purring your whiskers off and friends are not food or oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap so really likes hummus.</p>

position: sticky is a hybrid of relative and fixed:
- If the element is in view, it behaves like relative.
- If the element is not in view (the user has scrolled), but its containing block is, it behaves like fixed
- If its parent gets out of view as well, it behaves like relative again
What happens with horizontal scrolling?

position: sticky makes elements stay in the viewport for as long as their ancestors do

When learning CSS, the precision of absolute positioning may be tempting, but avoid it: It will bite you back later, when you need to make changes!

Do not use absolute positioning to avoid figuring out layout: it will bite you back!

Floats

The float property removes an element from normal flow and sticks it to the left (or right) side of its parent container. Any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element.
While we can add a margin to the float to push the text away, we can't add a margin to the text to move it away from the float.
This is because a floated element is taken out of normal flow, and the boxes of the following items actually run behind the float, as we can see by applying backgrounds.
How could we make this layout more visually interesting and alternate floating the images left and right?

Floats push an element to the left or right and flow the rest of the content around it

Problems with floats

What happens when all the floated images are staggered together?
What happens when there is not enough content to flow around the entire vertical edge?
- Can we move the last image upwards?
- clear: both can help with teh footer, but is not ideal (try adding some top margin…)

These crude tools (`float` & `clear`) were how CSS layouts were done until ~2015!
🤭🤢🤯

Grid Systems

In graphic design, as in architecture, the guts of a finished product are held up by an underlying support structure that—more often than not—is invisible to the viewer, but can just as easily make or break a design.

Grids are everywhere

Which design principles does a grid facilitate?

On the Web, grids must be flexible

How do we implement grids with CSS?

Grid Layout

<header>
				<h1>Sir Adam Catlace</h1>
				<p>An awesome cat</p>
			</header>
			<aside>
				<ul>
					<li><a href="https://facebook.com/adamcatlace">Follow Sir Adam on Facebook</a></li>
					<li><a href="https://twitter.com/adamcatlace">Follow Sir Adam on Twitter</a></li>
					<li><a href="https://instagram.com/adamcatlace">Follow Sir Adam on Instagram</a></li>
				</ul>
				<p>
				Fat baby cat best buddy little guy i'm going to lap some water out of my master's cup meow. Meoooow milk the cow and cough for when in doubt,
				</p>
			</aside>
			<main>
				<p>hiiiiiiiiii feed me now or leave fur on owners clothes eat the rubberband the cat was chasing the mouse. I love cuddles hide head under blanket so no one can see yet meow to be let in yet love me! but the dog smells bad.</p>
				<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
				<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
				<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			</main>
			<footer>
				Copyright ©2020 Sir Adam Catlace
			</footer>

display: grid enables Grid layout on an element. This element becomes the Grid Container and its children are called Grid Items.
display: grid doesn’t do much on its own, you also have to define the Grid template. There is a number of properties to do that, such as:
- grid-template-rows
- grid-template-columns
- grid-template
- …and many more
The 1fr unit allows us to distribute the available space in fractions without having to do any math with percentages.
The grid-gap property allows us to set spacing between the grid cells.
The grid-row and grid-column properties allow us to place items on specific rows and/or columns. Note that multiple items can be placed in the same cell, and then they will overlap!

Some terminology…

Grid cell

A single unit of a CSS grid

Grid Lines

The vertical and horizontal lines that divide the grid and separate the columns and rows.

Grid area

Rectangular space surrounded by four grid lines. A grid area can contain any number of grid cells.

Grid track

The space between two grid lines.

Grid track

This space can be horizontal or vertical

Grid row

A horizontal track of a grid

Grid column

A vertical track of a grid.

Gutter

The space between rows and columns in a grid

Grid Container

The element with display: grid

Grid Item

Any element that is a direct child of a grid container

Grid Layout

Defining named areas is another way to specify a grid.
grid-area allows you to assign an element to a named area.
Then, rearranging elements on the grid is just a matter of editing the grid template!

grid
- grid-template
  - grid-template-rows
  - grid-template-columns
  - grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow

grid-area
- grid-row
  - grid-row-start
  - grid-row-end
- grid-column
  - grid-column-start
  - grid-column-end

grid-gap
- grid-column-gap
- grid-row-gap

grid-row and grid-column allow us to control which grid lines elements fall on.

The repeat allows us to create multiple columns or rows with the same metrics
Replaced elements with intrinsic dimensions still retain them in grid layout, unless set otherwise
grid-row-end and grid-column-end allow us to make elements span multiple grid cells without explicit control of which grid cells they fall on.
The dense keyword in grid-auto-flow prevents holes

display:contents allows us to make descendants grid children
Text nodes are grid items too!

One dimensional layout

Grids are tremendously useful, but can be overkill for certain things
Often we don't want the two-dimensional alignment of grids, and maintaining a grid template can be a pain

display: flex enables Flexbox layout on an element. This element becomes the Flex Container and its children are called Flex Items.

flex: N defines the proportion that a flex item spreads over.

flex-direction: column on the flex container makes the items flow from top to bottom

align-items and justify-content on the flex container specify alignment in each direction. Which direction depends on the value of flex-direction

flex
- flex-grow
- flex-shrink
- flex-basis

flex-flow
- flex-direction
- flex-wrap

MultiCol Layout

<p>Cat ipsum dolor sit amet, bite the neighbor's bratty kid love you, then bite you or need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Run outside as soon as door open.</p>
			<p>Sit on the laptop i will be pet i will be pet and then i will hiss, refuse to drink water except out of someone's glass or cough furball for run up and down stairs cats go for world domination suddenly go on wild-eyed crazy rampage.</p>
			<p>Rub against owner because nose is wet dream about hunting birds climb a tree, wait for a fireman jump to fireman then scratch his face. You are a captive audience while sitting on the toilet, pet me i vomit in the bed in the middle of the night for sleep all day whilst slave is at work, play all night whilst slave is sleeping stretch, yet find a way to fit in tiny box. </p>
			<p>Munch, munch, chomp, chomp. Peer out window, chatter at birds, lure them to mouth then cats take over the world eat the fat cats food. Man running from cops stops to pet cats, goes to jail intently stare at the same spot, friends are not food or litter kitter kitty litty little kitten big roar roar feed me fish i must find my red catnip fishy fish sit in box eat fish on floor.</p>
			<p>Demand to have some of whatever the human is cooking, then sniff the offering and walk away kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff play riveting piece on synthesizer keyboard.</p>
			<p>Sleep in the bathroom sink sit on the laptop so nyan fluffness ahh cucumber! play time, and scratch the furniture for run at 3am soft kitty warm kitty little ball of furr. Purr while eating get video posted to internet for chasing red dot.</p>
			<p>Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table man running from cops stops to pet cats, goes to jail, and jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Licks paws being gorgeous with belly side up hiiiiiiiiii feed me now yet slap kitten brother with paw jump around on couch, meow constantly until given food, so catching very fast laser pointer.</p>
			<p>I like fish Gate keepers of hell for mice, for leave buried treasure in the sandbox for the toddlers pet my belly, you know you want to; seize the hand and shred it! for meow meow mama. Hunt anything that moves throwup on your pillow, so have my breakfast spaghetti yarn yet cat cat moo moo lick ears lick paws or cats are a queer kind of folk sit in a box for hours. Loves cheeseburgers suddenly go on wild-eyed crazy rampage cough.</p>
			<p>Loved it, hated it, loved it, hated it trip on catnip, purr while eating jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute? mark territory, but run at 3am.</p>

Multiple Column Layout is another type of single-dimensional layout mode.
It is activated by using columns, column-count, or column-width
column-gap (in the future just gap) allows you to control spacing between columns
column-rule allows you to add lines between columns. Its syntax is similar to border.

Multicol is not only about text, it can be used to lay out any element

Topics for today

How do we break out of the flow and lay elements over others?

position: absolute takes elements out of normal flow and places them over everything else

Use the offset properties (top, right, bottom, left) to control the placement of absolutely positioned elements

Terminology Positioned element is any element with position != static

Any positioned element is a containing block of any positioned descendants = that's where top, right, bottom, left count from

position: fixed allows us to position elements in the same place regardless of scrolling

position: sticky makes elements stay in the viewport for as long as their ancestors do

Do not use absolute positioning to avoid figuring out layout: it will bite you back!

Floats push an element to the left or right and flow the rest of the content around it

Problems with floats

These crude tools (float & clear) were how CSS layouts were done until ~2015! 🤭🤢🤯

Grids are everywhere

Which design principles does a grid facilitate?

On the Web, grids must be flexible

How do we implement grids with CSS?

Grid Layout

Grid Layout

MultiCol Layout

Terminology
Positioned element is any element with `position` != `static`

Any positioned element is a containing block of any positioned descendants
= that's where top, right, bottom, left count from

These crude tools (`float` & `clear`) were how CSS layouts were done until ~2015!
🤭🤢🤯