練習

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS11</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style-type:none;
 }
 body{
	 background-image:url(images/bg.gif);
	 background-repeat:repeat;
	 }
#container{
	width:715px;
	height:440px;
	margin: 0 auto;
	background-color:#000000;
	}	 
#header{
	width:715px;
	height:279px;
	background-image:url(images/mainImage.jpg);
	background-repeat:no-repeat;
	}
#content{
	width:215px;
	height:130px;
	float:right;
	}
#sidbar{
	margin-left:15px;
	width:500px;
	height:130px;
	}
#footer{
	width:715px;
	height:21px;
	}
h1{
	width:715px;
	height:39px;
	background-color:#000;
	}
h2{
	width:377px;
	height:57px;
	}
ul{
	}				
li{
	width:193px;
	height:30px;
	}		
address{
	margin-left:415px;
	}			
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.jpg"></h1>
</div>
<div id="content">
<ul>
<li><img src="images/btn01.jpg"></li>
<li><img src="images/btn02.jpg"></li>
<li><img src="images/btn03.jpg"></li>
</ul>
</div>
<div id="sidbar">
<h2><img src="images/mainCopy.gif"></h2>
</div>
<div id="footer">
<address><img src="images/copyright.gif"></address>
</div>
</div>
</body>

</html>
(感想)
バックグラウンドの紫の画像が見たときに箱と同じかそれ以上大きいと思いましたが
小さく一瞬慌てましたがリピートをすると頭で理解したらほっとしました。