HTMLのサイドナビが表示されない

HTMLの学習中です。
右端にサイドナビをが表示されません。
CSSのどこま間違っているのでしょうか？

参考にしているサイトは
http://sakichin.com/chapter03/chapter03_step03_06.html
です。

どなたかご教授下さい。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="style.css">
6 <title>カラムテスト</title>
7</head>
8
9</body>
10  <div id="wrap">
11
12    <header>
13    </header>
14
15    <nav>
16    </nav>
17    
18
19    <div id="margin">
20    </div>
21
22    <div id="contents">
23    </div>
24
25    <div id="sidenavi">
26    </div>
27
28    <footer>
29    </footer>
30  </div><!--wrap-->
31</html>

CSS
1#Wrap{
2  width: 960px;
3  margin: 0 auto;
4}
5
6#margin {
7width:960px;
8height:350px;
9float:left;
10margin:10px 0px 15px 0px;
11background-color: #333;
12}
13
14#contents {
15width:615px;
16float:left;
17background-color: #333;
18}
19
20#sidenavi {
21width:330px;
22margin-left:15px;
23float:left;
24background-color: #ccc;
25}
26
27footer {
28clear:both;
29height:50px;
30text-align:center;
31/*
32font-size:0.85em;
33background-image:url(img/footer.gif);
34background-repeat:no-repeat;
35padding-top:30px;
36display:block;
37*/
38background-color: #333;
39}
40

Lhankor_Mhy

2016/11/19 02:41

当方で確認しましたが、問題なく右端にサイドナビが表示されました。現状はどのような表示になっていますか？

退会済みユーザー

2016/11/19 04:09

現状の表示状態を、質問本文に載せましたのでご確認ください。

行動規範の内容に同意します

回答1件

ベストアンサー

何もないボックスなので高さを指定しないと高さ0で見えない状態になります。

css
1#contents {
2width:615px;
3height:350px; /* 追加 */
4float:left;
5background-color: #333;
6}
7
8#sidenavi {
9width:330px;
10height:350px; /* 追加 */
11margin-left:15px;
12float:left;
13background-color: #ccc;
14}