2カラムレイアウト（課題）＆10月17日の学習

2カラムレイアウト

先生の回答のcssをできるだけ見ないで入力してみたらレイアウトがボロボロ、地道に少しづつ少しづつ間違い探しをしてやっとここまでたどり着いたものの、「今月のおすすめ」が微妙に右寄りで直らない。そして、下部の「copyright」は左寄り。。。
しかしながら、またも非常に時間がかかってしまった。。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-Style-Type" content="text/css" />
<title>2カラムレイアウト</title>
<link href="css/2karamu1017.css"rel="stylesheet"type="text/css"media="screen,print" />
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.gif"width="80px"height="80px"alt="Cockeyolly" /></h1>
</div>
<div id="sidebar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="mailto:xxx@xxxcx.com">メール</a></li>
</ul>
</div>
<div id="content">
<h2><img src="images/title.gif"width="250px"height="50px"alt="今月のおすすめ" /></h2>
<h3>きのこのオムライス</h3>
<p class="photo"><img src="images/photo01.jpg"width="150"height="100"alt="きのこのオムライス" />ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円</p>
<h3>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h3>
<p class="photo"><img src="images/photo02.jpg"width="150"height="100"alt="シーフードスパゲッティ" />エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円</p>
</div>
<div id="footer">
<address>Copyright(c)2010 Cafe Cockeyolly</address>
</div>
</div>
</body>
</html>

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #FFF
}
#container{
    width: 640px;
    height: auto;
    margin: 30px auto;
    background-color: #FFF;
    background-image: url(../images/bg_img.gif);
    background-repeat: repeat-y;
    background-position: 0 0;
}
#header{ 
    width: 150px;
    text-align: center;
    margin: 20px auto;
    float: left;
}
#sidebar{
    width: 150px;
    height: auto;
    background-color: transparent;
    margin: 50px 10px 0 20px;
}
#sidebar ul{
    list-style-type: none;
}    
#sidebar li a{
    font-size: 14px;
    color: #FFF;
    line-height: 1.3; 
    text-decoration: none;  
}
#sidebar li a:hover{
    color: #FF4500;
}
#content{
    width: 450px;
    height: auto;
    font-size: 14px;
    line-height: 1.5;
    margin: -250px 20px 10px 10px;
    float: right;
    border-bottom: 2px solid #C0C0C0;
}
#content h2{
    margin: 30px auto; 
    text-align: center;
}
#content h3{
    color: #A0522D;
    font-size: 16px;
    margin: 0 0 0 10px;
    padding: 2px 0 2px 10px;
    border-left: 6px solid #FF8C00;    
}
#content p.photo img{
    float: right;
    margin: 0 0 0 10px;
}
#content p{
    margin: 10px 30px 40px 10px;
}
#footer address{
    color: #A9A9A9;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    margin: 0 auto 30px auto; 
    padding: 0 0 21px 0;    
    clear: both;
}

入力重要事項

margin topに『ネガティブマージン』を設定
例）margin-top: -30px;
内で、文章の右隣に画像を並べる際、p文章の前に画像設定の入力をする。
例）＜p class="photo"＞＜img src="images/photo01.jpg"width="150"height="100"alt="きのこのオムライス" /＞ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。＜/p＞
背景画像の設定。