HTML5でサイドバーのメニューが、左に移動しない
いまHTML５とCSSを使って勉強しているのですが、
サイドバーを右側にFloatしたいのですが、google Chrome確認しても実行されません。
私の記述ミスだと思うのですが、何度見直しても原因がわかりません。
わかる方にご教授願います。
・htmlソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 L20 Step 1_1</title>
<link rel="stylesheet" href="※CSSのリンク張ってます" type="text/css" media="all">
<style>/* CSS */</style>
<script>/* JavaScript */
<!--
window.alert("Web開発室ブログ");
//-->
</script>
<noscript>
JavaScript が非対応になっています。
</noscript>
</head>
<body>
<!--Web開発室ブログ-->
<header id="header">
<h1>Web開発室ブログ</h1>
<nav>
<ul>
<li><a href="#hoge">最新の投稿</a></li>
<li><a href="#hoge">アーカイブ</a></li>
<li><a href="#hoge">開発者向け</a></li>
<li><a href="#hoge">お問い合わせ</a></li>
</ul>
</nav>
</header>
<section id="main_section">
<article class="contents">
<header>
<h2>なぜHTML5が次のWeb開発スタンダードになりえるのか</h2>
<p>
開発プロジェクトリーダー太郎
<time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time>
</p>
</header>
<p>
HTML4.01が世の中に発表されてから、HTML規格の外側で様々なアイデアやシステムが試行錯誤されてきました。
結果、複数の団体が「Webの基準」を目指してアイデアやシステムの営業に躍起になっていました。
つまりHTMLは、基本的なぶぶんでは「業界標準」でしたが、求められる装飾や細かな部分については機能不足だったのです。
</p>
<aside>
<p>
スマートフォンのブラウザはパソコンのブラウザよりも意図的にHTML5の仕様に対応しています。
</p>
</aside>
<p>
機能不足が指摘されていた「装飾」の部分について、HTML5は大きな一歩を踏み出しました。
オーディオやムービーをHTML5の機能だけで実現できるように拡張し、
本来の利用方法とは違った使われ方をしていた様々な要素に対する解決策を打ち出しました。
</p>
<footer>
<p><a href="#"><i>25 コメント</i></a>...</p>
</footer>
</article>
</section>
<section id="sidebar">
<nav>
<h3>アーカイブ</h3>
<ul>
<li><a href="2010/10">October2010</a></li>
<li><a href="2010/9">September2010</a></li>
<li><a href="2010/8">August2010</a></li>
<li><a href="2010/7">July2010</a></li>
<li><a href="2010/6">June2010</a></li>
<li><a href="2010/5">May2010</a></li>
<li><a href="2010/4">April2010</a></li>
<li><a href="2010/3">March2010</a></li>
<li><a href="2010/2">February2010</a></li>
<li><a href="2010/1">January2010</a></li>
</ul>
</nav>
</section>
<footer id="footer">
<p>©2010 パソコン教室</p>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="about">About</a></li>
<li><a href="terms.html">サービスの条件</a></li>
<li><a href="privacy.html">プライバシーについて</a></li>
</ul>
</nav>
</footer>
</body>
</html>
・CSSソース
@charset "utf-8";
/*START：ページのコンテンツを中央に配置し、フォントも設定*/
body{
width:960px;
margin:15px auto;
font-family:Arial,"MS Trebuchet",sans-serif;
}
/*END：ページのコンテンツを中央に配置し、フォントも設定*/
/*START：基本的な設定*/
p{
margin:0 0 20px 0;
}
p,li{
line-height:20px;
}
/*END：基本的な設定*/
/*START：ヘッダの幅を定義*/}
header#header{
width:100%;
}
/*END：ヘッダの幅を定義*/
/*START：ul要素リンクを水平ナビゲーションバーに変換*/}
header#header nav ul,#footer nav ul{
list-style:none;
margin:0;
padding:0;
}
#header nav ul li,footer#footer nav ul li{
padding:0;
margin:0 20px 0 0;
display:inline;
}
/*END：ul要素リンクを水平ナビゲーションバーに変換*/
/*START：main_sectionセクションは左寄せにして幅を調整*/}
/*aside要素内の吹き出しも調整*/
section#main_section{
float:left;
width:74%;
}
section#main_section aside{
float:right;
width:35%;
margin-left:5%;
font-size:20px;
line-height:40px;
}
/*aside要素内の吹き出しも調整*/
/*END：main_sectionセクションは左寄せにして幅を調整義*/
/*START：サイドバーを整列させ、幅も調整*/
section#sidebar{
float:left;
width:25%;
}
/*END：サイドバーを整列させ、幅も調整*/
/*START：フッタをページの一番下に設置*/
footer#footer{
clear:both;
width:100%;
display:block;
text-align:center;
}
/*END：フッタをページの一番下に設置*/
補足
ありがとうございます。 Googleは、このコメントに基づいて広告用の語句を拾うようです。 つまり、Google検索エンジンロボットだけは、このコメントを読み取り、それに対応した処理をすると考えればいいのでしょうか。