隙間を無くしたいです。

前提・実現したいこと

このように隙間の無いように作りたいです。

発生している問題・エラーメッセージ

このように隙間ができてしまします。

該当のソースコード

body {
	width: 100%;
}

.wrapper {
	width: 600px;
	margin: 0 auto;
}

.header {
	height: 100px;
	background: #141f40;
}

.side {
	float: left;
	width: 150px;
	height: 250px;
	background: #80bfa8;	
}

.content {
	float: right;
	width: 400px;
	height: 450px;
}

.content-top-left {
	float: left;
	width: 280px;
}

.content-top-left-top {
	height: 50px;
	background: #dbd400;
}

.content-top-left-bottom {
	height: 100px;
	background: #0093b7;
}

.content-top-right {
	float: right;
	width: 100px;
	height: 150px;
	background: #ff9c6b;
}

.content-bottom {
	height: 100px;
	background: #8c2727;
}	

.footer {
	height: 100px;
	background: #d98d30;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div class="wrapper">
		<div class="header">
		<!--  end of .header -->			
		</div>
		<div class="main clearfix">
			<div class="side">
			</div>
			<div class="content">
				<div class="contet-top clearfix">
					<div class="content-top-left">
						<div class="content-top-left-top"></div>
						<div class="content-top-left-bottom"></div>
					</div>
					<div class="content-top-right">
					</div>
				</div>
				<div class="content-bottom">
				</div>
			</div>
		<!--  end of .main -->
		</div>	
		<div class="footer">
		<!--  end of .footer -->			
		</div>
	<!--  end of .wrapper -->
	</div>
</body>
</html>

試したこと

隙間なくしようと、全体の横幅の設定を縮めると今度はコンテンツが下に行ってしましました。
ご回答よろしくお願いします。

Rwight

2021/03/28 07:27 編集

文字・background-colorとかをposition: absolute; を使うと自由に動かせますよ！詳しくはここのサイトをご覧ください。 https://developer.mozilla.org/ja/docs/Web/CSS/position

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

回答2件

ベストアンサー

画像の各ブロックのサイズを見てみると、mainクラスの中のブロックの幅を足すと、150px+150px+100px=400px です。しかし、全体を囲むwrapperクラスの幅は600pxに設定してあります。
当然隙間はできますよね。

あと、各ブロックの幅や高さも画像のサイズと異なってます。とりあえずは、各ブロックのサイズを画像通りにしましょう。そうしなければ、画像通りになるはずがありません。

あと、floatを使うのは10年ぐらい前の古い手法です。現在ならflexを使ってレイアウトしましょう。

下記のCSSで画像通りのレイアウトになります。

css
1body {
2  width: 100%;
3}
4
5.wrapper {
6  width: 400px;
7  margin: 0 auto;
8}
9
10.header {
11  height: 100px;
12  background: #141f40;
13}
14.main {
15  display: flex;
16}
17
18.side {
19  width: 150px;
20  height: 250px;
21  background: #80bfa8;    
22}
23
24.content {
25  width: 250px;
26  height: 250px;
27}
28.content-top {
29  display: flex;
30}
31.content-top-left {
32  width: 150px;
33}
34
35.content-top-left-top {
36  width: 150px;
37  height: 50px;
38  background: #dbd400;
39}
40
41.content-top-left-bottom {
42  width: 150px;
43  height: 100px;
44  background: #0093b7;
45}
46
47.content-top-right {
48  width: 100px;
49  height: 150px;
50  background: #ff9c6b;
51}
52
53.content-bottom {
54  width: 250px;
55  height: 100px;
56  background: #8c2727;
57}    
58
59.footer {
60  height: 100px;
61  background: #d98d30;
62}

html
1<div class="wrapper">
2  <div class="header">
3    <!--  end of .header -->            
4  </div>
5  <div class="main">
6    <div class="side">
7    </div>
8    <div class="content">
9      <div class="content-top clearfix">
10        <div class="content-top-left">
11          <div class="content-top-left-top"></div>
12          <div class="content-top-left-bottom"></div>
13        </div>
14        <div class="content-top-right">
15        </div>
16      </div>
17      <div class="content-bottom">
18      </div>
19    </div>
20    <!--  end of .main -->
21  </div>    
22  <div class="footer">
23    <!--  end of .footer -->            
24  </div>
25  <!--  end of .wrapper -->
26</div>

HTMLは質問のものから下記の一か所を修正しただけです。

contet-top → content-top

投稿2021/03/28 13:28

hatena19

総合スコア34053

Rwight

2021/04/02 22:14

hatena19さん勉強になります。。。「flex」というやつは知りませんでした。今までは「float」でやっていました。。。勉強になります　ありがとうございましたm (_ _) m 質問者さんこちらの方をもし思った通りの事が出来たら　こちらをベストアナウンサーにしてやってくださいよろしくお願いします。

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

###前提
えーとですね。最初にですが、自分なりのコードに書き直した所があります。そこだけはご承知ください。
(なおHTMLは変更しておりません)
###ソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="style2.css">
8</head>
9<body>
10    <div class="wrapper">
11        <div class="header">
12        <!--  end of .header -->            
13        </div>
14        <div class="main clearfix">
15            <div class="side">
16            </div>
17            <div class="content">
18                <div class="contet-top clearfix">
19                    <div class="content-top-left">
20                        <div class="content-top-left-top"></div>
21                        <div class="content-top-left-bottom"></div>
22                    </div>
23                    <div class="content-top-right">
24                    </div>
25                </div>
26                <div class="content-bottom">
27                </div>
28            </div>
29        <!--  end of .main -->
30        </div>    
31        <div class="footer">
32        <!--  end of .footer -->            
33        </div>
34    <!--  end of .wrapper -->
35    </div>
36</body>
37</html>

css
1body {
2    width: 100%;
3}
4
5.wrapper {
6    width: 600px;
7    margin: 0 auto;
8}
9
10.header {
11    height: 100px;
12    background: #141f40;
13}
14
15.side {
16    float: left;
17    width: 150px;
18    height: 250px;
19    background: #80bfa8;    
20}
21
22.content {
23    float: right;
24    width: 400px;
25    height: 450px;
26}
27
28.content-top-left {
29    float: left;
30    width: 280px;
31}
32
33.content-top-left-top {
34    height: 50px;
35    background: #dbd400;
36}
37
38.content-top-left-bottom {
39    height: 100px;
40    background: #0093b7;
41}
42
43.content-top-right {
44    float: right;
45    width: 100px;
46    height: 150px;
47    background: #ff9c6b;
48}
49
50.content-bottom {
51    height: 100px;
52    background: #8c2727;
53}    
54
55.footer {
56    position: relative; /*[追加]*/
57    height: 100px;
58    background: #d98d30;
59    top: -200px; /*[追加]*/
60}
61
62.clearfix:after {
63    content: "";
64    display: block;
65    clear: both;
66    height: 0;
67    visibility: hidden;
68}