Quiz Time!

Block vs Inline

<div class="box"></div>

<style>
.box {
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}
</style>

<div class="box"></div>

<style>
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}
</style>

Block vs Inline

Floats

<div class="box1"></div>
<div class="box2"></div>

<style>
.box1, .box2 {
  width: 100px;
  height: 100px;
  background: red;
}
.box1 {
  
}
.box2 {
  float: right;
}
</style>

Floats

1

2

Floats: Inlining

<div class="box1"></div>
<div class="box2"></div>

<style>
.box1, .box2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}
.box1 {
  
}
.box2 {
  float: right;
}
</style>

Floats

1

2

Floats

<div class="box1"></div>
<div class="box2"></div>

<style>
.box1, .box2 {
  width: 100px;
  height: 100px;
  background: red;
}
.box1 {
  float: right
}
.box2 {
  float: right;
}
</style>

Floats

1

2

Floats

1

2

3

Floats: Clearing

<div class="box1"></div>
<div class="box2"></div>

<style>
.box1, .box2, .box3 {
  width: 100px;
  height: 100px;
  background: red;
}

.box1 {

}
.box2 {
  float: right;
}

.box3 {
  clear: both
}
</style>

Relative Positioning

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.block1, .block2, .block3 {
  width: 100px;
  height: 100px;
  padding: 10px;
}

.block1 {
  background-color: green;
}

.block2 {
  background-color: red;
  position: relative;
  left: 50px;
  top: 10px;
}

.block3 {
  background-color: blue;
}

Relative Positioning

1

2

3

Inheritance

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

div {
  border: 10px solid black;
  margin: 10px;
  padding: 10px;
}

.block1, .block2, .block3 {
  width: 100px;
  height: 100px;
  padding: 10px;
}

.block1 {
  background-color: green;
}

.block2 {
  background-color: red;
}

.block3 {
  background-color: blue;
}

http://shoutkey.com/so

shoutkey.com/been

shoutkey.com/say

div@northwestern.edu

Inheritance

1

2

3

Position: Relative

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

.container {
  position: relative;
  border: 10px solid black;
}

.block1, .block2, .block3 {
  width: 100px;
  height: 100px;
  padding: 10px;
}

.block1 {
  background-color: green;
}

.block2 {
  background-color: red;
}

.block3 {
  background-color: blue;
}

Position: Relative

1

2

3

Position: Absolute

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

.container {
  position: relative;
  border: 10px solid black;
}

.block1, .block2, .block3 {
  width: 100px;
  height: 100px;
  padding: 10px;
  position: absolute;
}

.block1 {
  background-color: green;
}

.block2 {
  background-color: red;
}

.block3 {
  background-color: blue;
}

Position: Absolute

1

2

3