確認テスト(2) - はれあめはれ

応用

各ブロック同士の空きは、「10px」
幅「800px」を前提に、他の数値の変化は適宜おこなうこと

<!DOCTYPE html>
<lang="ja">
<head>
<meta charset="UTF=8">
<title>確認テスト2</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, print">
</head>
<body>
<div id="container">
<div class="wrapper">
<div id="header">
<h1>header</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div id="main">
<h2>main</h2>
</div>
<div id="sidebar">
<h2>sidebar</h2>
</div>
</div>
<div id="footer">
<address>footer &copy; All Rights Reserved.</address>
</div>
</div>
</body>
</html>

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}
body {
  color: #000;
  font-size: 1em;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", osaka, sans-serif;
}
#container {
  width: 800px;
  height: 600px;
  margin: 10px auto;
  background-color: #edf4f4;
}
.wrapper {
  overflow: auto;
}
#header {
  height: 120px;
  margin: 10px ;
  background-color: #bef7d8;
}
h1 {
  margin-left: 10px;
}
#nav ul {
  list-style-type: none;
  height: 60px;
  margin: 0 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}
#nav li {
  display: inline;
  float: left;
}
#nav li a {
  display: block;
  text-align: center;
   line-height: 60px;
  width: 150px;
  height: 60px;
  border-right: 1px solid #ccc;
}
#nav li a:link {
  color: #000;
  text-decoration: none;
}
#nav li a:visited {
  color: #ccc;
}
#nav li a:hover {
  text-decoration: underline;
  background-color: #fcfcc7;
}
#main {
  float: right;
  width: 585px;
  height: 310px;
  margin: 10px 10px 10px 5px;
  background-color: #aae7ed;
}
#sidebar {
  float: left;
  width: 185px;
  height: 310px;
  margin: 10px 5px 10px 10px;
  background-color: #aae7ed;
}
h2 {
  margin: 5px 0 0 10px;
}
#footer {
  height: 60px;
  clear: both;
  margin: 0 10px 10px 10px;
  background-color:  #ffd6e7;
} 
address {
  font-style: normal;
  text-align: center;
  padding-top: 15px;
}