html初心者　画像の位置が調整できない。

html
1<!DOCTYPE html>
2<html>
3 <head>
4  <meta charset="utf-8">
5  <title>Kenny's webpage</title>
6  <link rel="stylesheet" href="kenny's webpage.css">
7 </head>
8 <body class="all">
9 <div class="header">
10   <div class="title">Kennyのブログ</div>
11   <div class="header-list">
12    <ul>
13     <li>ああああ</li>
14     <li>いいいい</li>
15    </ul>
16   </div>
17  </div>
18
19 <div class="main">
20   <div class="img-contents">
21     <img src="IMG_9876.jpg" alt="">
22   </div>
23   <div class="img-contents">
24     <img src="IMG_1119.jpg" alt="">
25   </div>
26   <div class="img-contents">
27     <img src="IMG_2822.jpg" alt="">
28   </div>
29
30 </div>
31
32
33 <div class="footer">
34   <div class="footer-logo">kenny profile</div>
35   <div class="footer-list">
36     <ul>
37       <li>経歴</li>
38       <li>お問い合わせ</li>
39     </ul>
40   </div>
41
42 </div>
43</body>
44</html>
45
46

css
1.header{
2  height:90px;
3  background-color: #CCCC33;
4}
5
6.title{
7  padding: 20px;
8  color: #333333;
9  float: left;
10  font-size: 36px;
11}
12
13li{
14  list-style: none;
15}
16
17.header-list li{
18  padding: 33px 20px;
19  float: left;
20  list-style: none;
21}
22
23.main{
24  height: 600px;
25}
26
27.img-contents img{
28  height: 500px;
29  width: 350px;
30  margin-top: 30px;
31  float: left;
32}
33.footer{
34  height:170px;
35  background-color: #808080;
36  color: white;
37}
38.footer-logo{
39  font-size: 30px;
40  padding: 20px;
41  float: left;
42}
43
44.footer-list {
45  float: right;
46}
47.footer-list li{
48  padding-bottom: 20px;
49  padding: 20px;
50}
51
52```htmlで画像を入れたのですが、header部分のタイトルにかけてるpadding要素に引っ張られて、画像がそのタイトルの下に表示されず、位置が中途半端になってしまいます。
53
54
55
56上のがcssコードです。titleはheaderで、画像はmainと一応二の枠に分けているんですが、header部分にかけているcssコードがmainにも及ぶということはあるのでしょうか。初心者なので教えてください。

m.ts10806

2019/08/02 06:36

質問は編集できますので、下記、対応いただければと。＞html初心者「初心者アイコン」をつけてください。タイトルや質問本文に含む必要はありません。コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown

azuapricot

2019/08/02 06:41

このままじゃぜーんぜんわからないので、再現できるようなコードを提示してください。 HTMLもはってください

kenshirou

2019/08/02 06:43

HTMLのソースサンプルを見せてもらうことは可能ですか？（HTML内のタイトル等のテキストは適当でいいです。）

htmldsbiuwdbco

2019/08/02 06:43

すいません。少々お待ちください。

htmldsbiuwdbco

2019/08/02 06:46

コード全部貼ってみました。

m.ts10806

2019/08/02 06:48

細かいところすみません。できれば、できればでいいんですが、HTMLとCSSが別ファイルなら、コードブロックはわけてもらったほうがこちらとしても確認しやすいです。

htmldsbiuwdbco

2019/08/02 06:56

すいません。分けてみました

htmldsbiuwdbco

2019/08/02 06:59

CSSの.mainの所にpaddingの設定を行なったら画像のバランスが取れました。ここで質問なんですがmainにpaddingの設定を入れないとtitleのpaddingに引っ張られてしまう理由はなぜでしょうか

kenshirou

2019/08/02 07:25

あれ、.mainのpaddingがなければ表示は良さそうなのですが、どのような表示を期待しているのでしょうか？（あと、早まってヘンな回答をしてしまってスミマセン。）

htmldsbiuwdbco

2019/08/02 08:02

mainのpaddingをつけると画像が左右対称になりバランスがよくなりました。これをとってしまうとタイトル名より下に画像が来なくなりバランスが狂います。

azuapricot

2019/08/02 08:28

具体的な最終図を図示してもらえますかー？どういうふうにしたいのか全然わかりませぬ。多分floatが解除できてないのが原因なきが。 .main{ clear:both; height: 600px; } とかいれたらどうなりますか？

yoshinavi

2019/08/02 10:06

希望するレイアウトにならないのは、floatの解除不足によると推測されます。 floatを効かせた要素で、回り込みレイアウトにする場合以外は、基本的に解除する必要があります。現状と、理想とするレイアウトのイメージ図等を提示されると良いかと思います。

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

回答2件

floatをかけた次のブロック、今回は.mainと.footerにclear:both;を指定するなどして、floatを解除してみてはいかがでしょうか。
clearfixを使うという方法もあります。
floatの解除

投稿2019/08/02 07:33

okne

総合スコア217

~~「padding: 33px 20px;」や「padding: 100px 80px;」のような複数ピクセル表記で区切り文字のカンマが抜けているのが原因では。
とりあえず、「padding: 33px, 20px;」や「padding: 100px, 80px;」のようにカンマを挿入してみてください。
~~
「padding: 33px 20px;」や「padding: 100px 80px;」の表記は正しかったです。スミマセン。
具体的にpaddingを行いたい方向（padding-top,padding-bottom,padding-left,padding-right）で調整してみてはどうでしょうか？

投稿2019/08/02 07:09

編集2019/08/02 07:18

kenshirou

総合スコア772