Exercise : More Floats (by Morgan Doocy)

Modify the following HTML and CSS code to create some/all of the appearances on the next slides. 

<div id="a">A</div>
<div id="b">B</div>
<div id="c">
	Lorem ipsum
  dolor sit amet, ... 
</div>

#a, #b {
  width: 100px;
  height: 100px;
  font: 30pt bold Helvetica, Arial, sans-serif;
  line-height: 100px;
  text-align: center;
}
#a { background-color: lightblue; }
#b { background-color: pink; }
#c { background-color: lightgray; }

Exercise expected appearances 1

1. expected output 2. expected output 3. expected output

Exercise solutions 1

1. 
#a {
	float: left;
}
#b {
	float: right;
}
2. 
#a {
	float: left;
}
#b {
	float: right;
	clear: left;
}
3. 
#a {
	float: left;
}
#b {
	float: right;
	clear: left;
}
#c {
	clear: left;
	text-align: right;
}

Exercise expected appearances 2

4. expected output 5. expected output 6. expected output

Exercise solutions 2

4. 
#a {
	float: left;
}
#b {
	float: right;
	clear: left;
}
#c {
	text-align: right;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
}
5. 
#a {
	float: right;
}
#b {
	float: left;
}
#c {
	float: left;
	text-align: center;
	width: 100px;
}
6. 
#a {
	float: right;
}
#b {
	position: absolute;
	top: 50px;
	right: 100px;
}
#c {
	clear: right;
	text-align: center;
	margin-right: 100px;
}

Exercise expected appearances 3

7. expected output 8. expected output 9. expected output

Exercise solutions 3

7. 
#a, #b {
	float: left;
}
#c {
	margin-left: 200px;
}
8. 
#a {
	float: left;
}
9. Must modify the HTML before adding CSS: 
<div id="d">
	<div id="a">A</div>
	<div id="b">B</div>
</div>

#a, #b { float: left; }
#c { margin-top: 100px; }
#d {
	background-color: lightgreen;
	height: 100px;
}