html 回り込み解除

初歩的なのですがheader, footer, side bar 2つの間にdiv3つはさむ構造にしたいのですが、以下のコードで崩れてしまいますどこがちがうでしょうか？

.head {
width: 100%;
height: 20%;
background-color: black;
}

.side1 {
width: 20%;
height: 60%;
background-color: red;
}

.in1 {
width: 80%;
height: 20%;
background-color: blue;
}

.in2 {
width: 80%;
height: 20%;
background-color: green;
}

.in3 {
width: 80%;
height: 20%;
background-color: yellow;
}

.side2 {
width: 20%;
height: 60%;
background-color: black;
float: right;
}

.foot {
width: 100%;
height: 20%;
background-color: black;
}

退会済みユーザー

2021/04/08 00:11 編集

余談ですが、「<!DOCTYPE html>」「<html lang="ja">」です。

m.ts10806

2021/04/08 00:13

コードはマークダウンのcode機能にてご提示ください

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

回答1件

ベストアンサー

絵で構造を示してもらえればよかったんだけど、たぶんこうなのかなって感じでやってみた。
違ってたらごめんね。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="332099.css">
6  <title>test3</title>
7</head>
8<body>
9
10<div class="head">へっだ</div>
11
12<div class="main_container">
13
14	<div class="side1 inline">さいど１</div>
15
16	<div class="main inline">
17		<div class="in1">あ</div>
18
19		<div class="form">
20			<form action="pdo_insert.php" method="post">
21			<input type="text" name="name" size="10" maxlength="10">
22			<input type="submit" value="送信する">
23			</form> 
24		</div>
25
26		<div class="in2">か</div>
27
28		<div class="in3">さ</div>
29	</div>
30
31	<div class="side2 inline">さいど２</div>
32
33</div>
34
35<div class="foot">ふった</div>
36
37</body>
38</html>

css
1.head { 
2	width: 100%; 
3	height: 20%; 
4	color: white;
5	background-color: black; 
6}
7
8.side1 { 
9	width: 20%; 
10	color: white;
11	background-color: red; 
12	letter-spacing: normal;
13}
14
15.in1 { 
16	height: 20%; 
17	color: white;
18	background-color: blue; 
19}
20
21.in2 { 
22	height: 20%; 
23	color: white;
24	background-color: green; 
25}
26
27.in3 { 
28	height: 20%; 
29	color: white;
30	background-color: yellow; 
31}
32
33.side2 { 
34	width: 20%; 
35	color: white;
36	background-color: black; 
37	letter-spacing: normal;
38}
39
40.foot { 
41	width: 100%; 
42	height: 20%; 
43	color: white;
44	background-color: black; 
45}
46
47.inline {
48	display: inline-block;
49}
50
51.main_container {
52	letter-spacing: -0.4em;
53}
54.main {
55	letter-spacing: normal;
56	width: 60%;  
57}
58
59.form {
60	
61}