要素のpositionを固定する (HTML/CSS)

やりたいこと
--> ①sidebarを②main-bodyの右側に固定したい。

トラブル
--> ウィンドウが小さい時は①が②の下に来てしまい、ウィンドウを右へ引き伸ばすと①が②の右側に来る

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>Class 3 チャレンジ</title>
7  <link rel="stylesheet" href="styles.css" />
8</head>
9
10<body>
11  <div class="header">
12    <h4>Header</h4>
13  </div>
14  <div class="container">
15    <div class="main-body">
16      <h2>Main</h2>
17      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
18        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
19        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
20        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
21      <h2>Main</h2>
22      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
23        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
24        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
25        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
26      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
27        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
28        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
29        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
30    </div>
31    <div class="sidebar">
32      <h3>Sidebar</h3>
33      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
34        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
35        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
36        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
37    </div>
38  </div>
39  <div class="footer">
40    <h4>©Footer</h4>
41  </div>
42</body>
43
44</html>

CSS
1@charset "UTF-8";
2
3body, div, p, h1, h2, h3, h4, h5 {
4  margin: 0;
5  padding: 0;
6}
7
8/*
9* header
10*/
11.header {
12  background-color: rgba(237, 214, 247, 1);
13  color: white;
14  width: 1280px;
15  height: 50px;
16  padding: 13px 10px 10px 10px;
17  box-sizing: border-box;
18}
19
20/*
21* main & sidebar (wrapper)
22*/
23.main-body {
24  background-color: rgb(245, 245, 242);
25  width: 1000px;
26  height: 530px;
27  padding: 30px 20px 10px 50px;
28  float: left;
29  clear: both;
30  box-sizing: border-box;
31}
32
33.main-body p {
34  margin: 20px 0 20px 0;
35}
36
37.sidebar {
38  background-color: rgb(240, 234, 236);
39  color: white;
40  width: 280px;
41  height: 530px;
42  padding: 30px 10px 10px 10px;
43  float: left;
44  box-sizing: border-box;
45}
46
47/*
48* footer
49*/
50.footer {
51  background-color: rgba(177, 175, 179, 1);
52  color: white;
53  width: 1280px;
54  height: 150px;
55  margin-top: 3px;
56  text-align: center;
57  padding: 70px 10px 20px 10px;
58  clear: both;
59  display: inline-block;
60  box-sizing: border-box;
61  margin-top: 0;
62}

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

回答1件

ベストアンサー

トラブル

--> ウィンドウが小さい時は①が②の下に来てしまい、ウィンドウを右へ引き伸ばすと①が②の右側に来る

原因は、①と②の幅を固定値にしていて、かつ、float で横並びにしていることです。
①と②の幅の合計より画面幅か小さくなれば、収まりきらないので、①が下にきます。

floatでの横並びは今では古い手法です。今はFlexboxを使うのが主流です。もっと最新のGridを使ってもシンプルにできます。

下記は Flexbox を使った場合の修正例です。

float等の不要な設定は削除してます。
追加した設定はコメントを付けてます。

css
1@charset "UTF-8";
2
3body, div, p, h1, h2, h3, h4, h5 {
4  margin: 0;
5  padding: 0;
6  box-sizing: border-box;
7}
8
9/*
10* header
11*/
12.header {
13  background-color: rgba(237, 214, 247, 1);
14  color: white;
15  max-width: 1280px; /*最大幅*/
16  margin: 0 auto; /*中央配置*/
17  height: 50px;
18  padding: 13px 10px 10px 10px; 
19}
20.container {
21  max-width: 1280px; /*最大幅*/
22  margin: 0 auto; /*中央配置*/
23  display: flex; /*子要素を横並び*/
24}
25/*
26* main & sidebar (wrapper)
27*/
28.main-body {
29  background-color: rgb(245, 245, 242);
30  padding: 30px 20px 10px 50px;
31}
32
33.main-body p {
34  margin: 20px 0 20px 0;
35}
36
37.sidebar {
38  background-color: rgb(240, 234, 236);
39  color: white;
40  flex: 1 0 280px;
41  padding: 30px 10px 10px 10px;
42}
43
44/*
45* footer
46*/
47.footer {
48  background-color: rgba(177, 175, 179, 1);
49  color: white;
50  max-width: 1280px; /*最大幅*/
51  margin: 0 auto; /*中央配置*/
52  width: 100%;
53  height: 150px;
54  margin-top: 3px;
55  text-align: center;
56  padding: 70px 10px 20px 10px;
57}