確認テスト解説を元にフロート作ってみた 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>【CSS】併用できるか挑戦</title>
<style type="text/css">
#container {
  width: 800px;
  height: auto;
  background-color: #fff;
}
#container2 {
  width: 800px;
  height: auto;
  margin-top: 10px;
  background-color: #fff;
}
#f_right {
  background-color: #555;
  float:right;
  width: 500px;
  height: auto;
  padding:10px 30px 30px 10px;
}
#f_left {
  background-color: #999;
  float:left;
  width: 200px;
  height: auto;
  padding:10px 30px 30px 10px;
}
#f_r15pad {
  width: 380px;
  margin: 10px 0 0 10px;
  padding-top:15px;
  float:right;
  background-color: #00f;
}
#f_w400 {
  width: 400px;
  margin: 10px 10px 0 0;
  float: left;
  background-color: #ff0;
}
</style>
</head>
<body>
<div id="container">
<div id="f_right">
<h1>→右フロート</h1>
<p>右に置きたいフロート。こちらがメイン。</p>
</div>
<div id="f_left">
<h1>←左フロート</h1>
<p>左に置きたいフロート。<br />こちらがサブ。</p>
</div>
</div>
<div id="container2">
<div id="f_r15pad">
<p>2つ目の右に置きたいフロート。</p>
</div>
<div id="f_w400">
<p>2つ目の左に置きたいフロート。</p>
</div>
</div>
</body>
</html>

今回は35分で完成。
確認テストの1/4くらいのボリュームかもしれないのは内緒だ。