学校での製作

サイドバーにバナーを入れたい
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>擬似クラスを含むレイアウト</title>
<style type="text/css">
@ charset "UTF-8";
<!--
/*リセット*/
*{
   margin: 0;
   padding: 0;
   font-size: 100%;
   font-style: normal;
   font-weight: normal;
	 list-style-type: none;
	 text-align: left;
	 border: none;
}
body{
	  background-color: #ccc;
}
#container{
    width: 800px;
		height: auto;
		margin: 0 auto;
		background-color: #fff;
		overflow: hidden;
}
#header{
    width: 780px;
		height: 100px;
		margin: 10px;
		font-size: 2.0em;
		color: #ff0;
		text-align: center;
		background-color: #A3BED5;
}
#content{
   width: 540px;
	 height: 400px;
	 margin: 10px;
	 padding: 10px;
	 float: right;
	 background-color: #DCD78A;
}
#sidebar{
    width: 200px;
		height: 420px;
		float: left;
		margin: 10px;
		background-color: #9CC56E;
}
#banner{
    width: 200px;
		height: 80px;
}
#banner ul{
    width: 200px;
		height: 80px;
}
#banner li{
    width: 100px;
		height: 80px;
		display: block;
		border-top: 10px double #F00;
		border-right: 10px double #F00;
		border-bottom: 10px double #f00;
		border-left: 10px double #f00;
}
#footer{
    width: auto;
		height: 100px;
		margin: 10px;
		background-color: #E0B9D2;
		clear: both;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="header">株式会社HEADER部隊</div>
          <div id="wrapper">
          <div id="content">CONTENT</div>
          <div id="sidebar">
      　　    <div id="banner">
                  <ul>
                      <li><img src="images/banner.jpg" width="100" height="80" alt=""/></li>
                      <li><img src="images/banner.jpg" width="100" height="80"/></li>
                      <li><img src="images/banner.jpg" width="100" height="80" alt=""/></li>
                  </ul>
              </div>
              </div>
          </div>
      <div id="footer">
          <address>連絡先の表示</address>
      </div>
</div>
</body>
</html>