H05 C05 下のものを作りましょ 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロヴァンス</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>provence</h1>
<p><img src="img/header.gif" width="700px" height="120px"></p>
</div> <!-- /#header -->
<div id="wrapper">
<div id="content">
<p><img src="img/illust.gif" width="250px" height="196px">プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前（15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州（プロウィンキア、Provincia）であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。<br>
地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。</p>
</div> <!-- /#content -->
<div id="nav">
<ul>
<li><img src="img/nav_bg001.gif" width="200px" height="50px"></li>
<li><img src="img/nav_bg002.gif" width="200px" height="50px"></li>
<li><img src="img/nav_bg003.gif" width="200px" height="50px"></li>
<li><img src="img/nav_bg004.gif" width="200px" height="50px"></li>
<li><img src="img/nav_bg005.gif" width="200px" height="50px"></li>
<li><img src="img/nav_bg006.gif" width="200px" height="50px"></li>
</ul>
</div> <!-- /#nav -->
</div> <!-- /#wrapper -->
<div id="footer">
<h2><small>(c)provence</small></h2>
<p><img src="img/footer.gif" width="700px" height="61px"></p>
</div>
</div> <!-- /#container -->
</body>
</html>




@charset="UTF-8";

/*reset*/
body, div, h1, h2, p, ul, li, img {
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Verdana,
    Meiryo, 
    sans-serif;
}

/*style*/
#container {
  width: 700px;
  margin: 10px auto;
}
#header {
  width: 700px;
  position: relative;
  margin-bottom: 15px;
}
#header h1 {
  position: absolute;
  left: 10px;
  top: 40px;
  color: white;
}
#content {
  width: 460px;
  float: right;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 25px;
}
#content img {
  float: right;
  margin-left: 10px;
}
#nav {
  width: 240px;
  float: left;
}

ul li {
  list-style: none;
}
#footer {
  position: relative;
  clear: both;
}
#footer h2 {
  position: absolute;
  left: 300px;
  top: 25px;
  color: white;
  font-size: 14px;
}