floatを使用した際、mainとsideのずれを修正したい

floatを使用したレイアウトの課題を進めています。

右側のメイン　とサイドの縦の幅がずれてしまい修理方法を知りたいです。
自身のPCでは同じ縦幅で表示されているのですが課題を提出する方のPCでは以下のようにずれています。
同じChromeで開いています。課題を確認する先生が計算してやり直ししてくださいとのことですが
行き詰まってしまいました。
コードがそもそもおかしいなどございましたらご指摘いただければ大変助かります。
よろしくお願い致します。

htmlのコード

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの学習</title>
    <meta name="description" content="このページはHTMLを学習するページです">
    <meta name="keywords" content="HTML,学習,タグ,ページ">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/layout_float2_responsive.css">

  </head>

    <div id="wrap">

    <div id="inner">
    <div id="mainWrap">
      <div class="sample1">
        <div>ヘッダー</div>
      </div>

      <div class="sample1">
         <div>メニュー</div>
      </div>
      <div class="sample3">
        <div class="sample4"></div>
        <div class="sample4"></div>
        <div class="sample4"></div>
        <div class="sample4"></div>
      </div>


      <div class="sample3">
       <div class="sample5"></div>
       <div class="sample5"></div>
       <div class="sample5"></div>
      </div>

     <div class="sample3">
       <div class="sample6"></div>
       <div class="sample6"></div>
     </div>



     <div class="sample3">
       <div class="sample7"></div>
       <div class="sample7"></div>
       <div class="sample7"></div>
       <div class="sample7"></div>
       <div class="sample7"></div>
       <div class="sample7"></div>
     </div>

     <div class="sample9">サイド</div>


     <div id="footer">
         <div class="sample1">フッター</div>
     </div><!-- footer -->

     </div><!-- sideWrap -->
       <div id="sideWrap">
        <div class="sample8">サイド</div>
       </div><!-- /mainWrap -->





      <div class="clear"><hr /></div>
      </div><!-- /inner -->


</html>

CSSのコード

.body{ text-align:center; }
#wrap { width:690px; height: 565px; text-align:left; margin:0 auto; }
#inner { margin:10px; height:542px; width:650px; margin-right: auto;
margin-left : auto;}
#mainWrap { width:520px;  float:left;height: 540px; align: center;margin: 0}
#sideWrap { width:120px; float:left; height:540px; margin: 0;}
.clear { clear:both; }
.clear hr { display:none; }


.sample{
  width:660px;
  height: 550px;
  border:solid;
  margin:10px;
}

.sample0{
  width:500px;
  height:470px;
  border:solid;
  margin:10px;
}

.sample1{
  width:auto;
  height:60px;
  border:solid;
  margin:10px 0px 10px 10px;
}

.sample2{
  width:160px;
  height:440px;
  border:solid;
  margin:0px 10px 10px 10px;
  float: right;
  overflow:hidden;
}


.sample3{
  width:504px;
  height:auto;
  border:solid;
  margin:10px;
  overflow:hidden

}

.sample4{
  width:99px;
  height:30px;
  border:solid;
  margin:10px;
  float:left;
}

.sample5{
  width:140px;
  height:35px;
  border:solid;
  margin:10px;
  float:left;
}

.sample6{
  width:223px;
  height:35px;
  border:solid;
  margin:10px;
  float:left;
}

.sample7{
  width:57px;
  height:35px;
  border:solid;
  margin:10px;
  float:left;
}

.sample8{
  width:100px;
  height: 515px;
  border:solid;
  margin: 10px ;
  float: left;
}
.sample9{
  display: none;
}






body
{
	font-size: 15px ;		/* 文字サイズ */
	line-height: 1.618 ;	/* 行の高さ */
  margin-right: auto;
  margin-left : auto;
}


/* タブレットにだけ適用するCSS */
@media screen and (max-width: 600px)
{
  body
  {
  font-size: 14px ;
}

#mainWrap
 {
 width:auto;
 height: auto;
 margin: auto;
 overflow: hidden;
}

#sideWrap{
  clear: both;
}


.sample1{
  overflow: hidden;
  margin: 10px;
  width:500px;
  height: 60px;
}

.sample3{
  width:500px;
  height: 60px;

}
  .sample4{
  width:224px;
  height:30px;
  border:solid;
  margin:10px;
 }



 .sample7{
   width:140px;
   height:35px;
   border:solid;
   margin:10px;
   float:left;
 }

 .sample8{
   display: none;

 }

 .sample9{
     width:500px;
     height: 60px;
     margin:0px 10px 10px 10px;
     border: solid;
     display: block ;

 }



}

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
  /* ボディ */
  body
  {
    font-size: 13px ;	/* 文字サイズ */
  }

/* ヘッダー */


.sample
{
  margin: 0px ;			/* スペース */
  padding: 0px ;		/* 余白 */
  line-height: 1 ;	/* 行の高さ*/
  margin-right: auto;
  margin-left : auto;
}


  /* ロゴ画像 */
  .sample1
  {
    line-height: 1 ;
    overflow: hidden;
    margin: 10px;
    width: 500px;
  }
  .sample3{
    height: auto;




  }
  .sample4{
  width:90%;
  margin: 5%;

  }

  .sample5{
  width:90%;
  margin: 5%;
  }

  .sample6{
  width:90%;
  margin: 5%;
  }
  .sample7{
  width:90%;
  margin: 5%;
  }
  .sample8{
    display: none;
  }

  .sample9{
    display: block ;
  }





  #sideWrap{
    clear: both;
  }
  #mainWrap
   {
   width:auto;
   height: auto;
   margin: auto;
   overflow: hidden;
  }


}

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

回答3件

コードがそもそもおかしいなどございましたら

とのことなのでコード上の不自然なところを指摘します。

<!DOCTYPE html> 宣言がない
~~<body></body> がない~~ Sep 2, 2019 revised
<div id="wrap"> に対応する </div> がない
grid layoutかflexboxでやったほうがよい。floatを使うのがそもそも事態を複雑にしている

ちなみにvaridatorの指摘は次の画像の通りでした

投稿2019/09/01 23:03

編集2019/09/02 00:19

thyda.eiqau

総合スコア2982

kyoya0819

2019/09/01 23:15

bodyタグは省略可能です。

thyda.eiqau

2019/09/02 00:12

asuchi0819さん、W3Cには次の記載がありますが、本コードでbodyタグの内側に相当する最初の要素はインデントのためのspace characterではないでしょうか。本文に対する私の解釈が間違っていますでしょうか。 A body element’s start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.

thyda.eiqau

2019/09/02 00:14

と思いましたがW3Cのhtml validatorにかけるとたしかにbodyが無いことは指摘されないですね、回答修正しておきます

kyoya0819

2019/09/02 00:40

インデントより前に改行あるから良いのでは？

thyda.eiqau

2019/09/02 00:55

asuchi0819さん、なるほど、納得しました

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>HTMLの学習</title>
6  <meta name="description" content="このページはHTMLを学習するページです">
7  <meta name="keywords" content="HTML,学習,タグ,ページ">
8  <meta name="viewport" content="width=device-width,initial-scale=1">
9  <link rel="stylesheet" href="css/layout_float2_responsive.css">
10</head>
11<div id="wrap">
12  <div id="inner">
13    <div id="mainWrap">
14      <div class="sample1">
15        <div>ヘッダー</div>
16      </div>
17      <div class="sample1">
18         <div>メニュー</div>
19      </div>
20      <div class="sample3">
21        <div class="sample4"></div>
22        <div class="sample4"></div>
23        <div class="sample4"></div>
24        <div class="sample4"></div>
25      </div>
26      <div class="sample3">
27       <div class="sample5"></div>
28       <div class="sample5"></div>
29       <div class="sample5"></div>
30      </div>
31     <div class="sample3">
32       <div class="sample6"></div>
33       <div class="sample6"></div>
34     </div>
35     <div class="sample3">
36       <div class="sample7"></div>
37       <div class="sample7"></div>
38       <div class="sample7"></div>
39       <div class="sample7"></div>
40       <div class="sample7"></div>
41       <div class="sample7"></div>
42     </div>
43     <div class="sample9">サイド</div>
44     <div id="footer">
45         <div class="sample1">フッター</div>
46     </div><!-- footer -->
47   </div><!-- sideWrap -->
48   <div id="sideWrap">
49     <div class="sample8">サイド</div>
50   </div><!-- /mainWrap -->
51   <div class="clear"><hr /></div>
52 </div><!-- /inner -->
53</div>
54</html>

CSS
1.body {
2  text-align: center;
3} // <-これ何?

何だろう。多分実際のサイトでこのコード見たらブラウザバックするかも
そもそもインデントというのはわかりやすく入れるものですが全体的にインデントの個数がバラバラです。
そのせいで閉じタグのつけ忘れなどが頻発します。

結論：適当なインデントはファイル容量増やすだけな無駄なもの

投稿2019/09/02 00:52

編集2019/09/02 00:58

kyoya0819

総合スコア10429

ベストアンサー

推測ですが･･･

先生のPCには「リセット」が入っており、以下が使われている可能性があります。
確認されると良いかと思います。

CSS
1* {
2  box-sizing: border-box;
3}

投稿2019/09/04 05:36

yoshinavi

総合スコア3523

suzu_1107

2019/09/09 06:06

確認したところ上記の内容がまさにずれの原因でした。無事課題を進めることができました。大変助かりました。ありがとうございます。

yoshinavi

2019/09/09 06:14

解決されて何よりです。 (^^)

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

floatを使用した際、mainとsideのずれを修正したい

関連した質問