【授業の復習】 - Today & Tomorrow...

【授業の復習】

<html>
<head>
<title>確認テスト</title>
<style type="text/css">
body{
background-color:#ccc

}

#containar{
  background-color:#fff
  
  height:;
  margin: 10px auto ;
  width:800px;
}
#header{
  background-color:#a3bed5;
  height:100px;

}
#wrapper{
  background-color:pink;
 
  overflow: auto;
}
#content{
  width:580px;
  height:290px;
  background-color:#dcd78a;
  float:right;
  margin-top:10px;
  margin-bottom:10px;
}

h1{
  font-size: 1.6em;
  font-family: serif;
  padding: 20px 0 0 20px;
}

p{
  font-size: 1.0em;
  padding-left: 20px;
  font-weght: bold;
}


h2{
  font-size: 1.6em;
  padding: 20px 0 0 20px;
}

#sidebar{
  width:210px;
  height:auto;
  background-color:#9cc56e;
  float:left;
  margin-top:10px;
  margin-bottom:10px;
  margin-right:10px;
  

}


#footer{
  clear:both;
  background-color:#e0b9d2;
  height:100px;
  
}
ul{
list-style-type: none;

}

li{
  margin-left: -35px;
}
h1,h2,p{
  color: #fff;
}

address {
  font-style: normal;
  text-align: center;
  padding: 15px 0 0 0;
  color: #fff
</style>

</head>
<body>
<div id="containar">
<div id="header"><h1>ここにサイトタイトルが入る</h1></div>
<div id="wrapper">
<div id="sidebar">
<ul>
<li><img src="03.jpg" width="200" height="80"/></li>
<li><img src="03.jpg" width="200" height="80"/></li>
<li><img src="03.jpg" width="200" height="80"/></li>

</ul> 
 
</div>
<div id="content"><h2>ここに見出しが入る</h2>
<p>ここに本文が入る</p></div>
</div>
<div id="footer"><address>ここに連絡先のテキストが入る</address></div>

</div>





</body>
</html>

※sidebarの位置がどうしてもうまくいかず、無理やり位置を合わせるために
maginの数値をマイナスにしてしまってます。