position: absolute;を使っての中央ぞろえと高さの確保

HTML 4.01にてCSS勉強を行っているのですが、position: absolute;で以下の点に困っています。

・「.contents_side_c」がセンターにこない
・「#wrapper」の高さが可変しない

3カラムのページを想定した練習で、左・真ん中(メイン)・右に3つのコンテンツがあり、#contentsの中のブロックは増えることを想定してhightを指定してません。
positionについて理解したいのですが、認識間違いがあれば教えていただけないでしょうか。
どうぞよろしくお願い致します。

・「.contents_side_c」がセンターにこない

css
1	width:428px;
2	background-color:#cd853f;
3	position: absolute;
4	left:0;
5	top:0;
6	margin:auto;

・「#wrapper」の高さが可変しない
↓#wrapper

css
1	width:820px;
2	margin:0 auto;
3	text-align:center;
4	background-color:#a9a9a9;

↓現在のページの状態

↓全体(html)

html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
3
4
5<html lang="ja">
6<head>
7<link href="css/reset.css" rel="stylesheet" type="text/css">
8<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
9
10<title>練習3</title>
11
12<link rel="stylesheet" type="text/css" href="css/style.css">
13</head>
14
15<body>
16
17<div id="wrapper">
18	
19	<div id="header">
20		<h1>header</h1>
21	</div><!--------------------------- header終わり -->
22	
23	<div id="menu">
24		<p>menu</p>
25	</div><!--------------------------- menu終わり -->
26	
27	<div id="contents">
28		<div class="contents_side_c">
29			<h2>contents_side_c</h2>
30			<ul>
31				<li>ここは</li>
32				<li>コンテンツの</li>
33				<li><span>センター</span></li>
34				<li>です</li>
35				<li>position:absolute;</li>
36				<li>でセンターに位置</li>
37				<li>させたいです</li>
38			</u/>
39			
40		</div><!--------------------------- contents_side_c終わり -->
41		
42		<div class="contents_side_l">
43			<h3>contents_side_l</h3>
44			<ul>
45				<li>ここは</li>
46				<li>コンテンツの</li>
47				<li><span>左</span></li>
48				<li>です</li>
49				<li>position:absolute;</li>
50				<li>で左に位置</li>
51				<li>させたいです</li>
52			</u/>
53		</div><!--------------------------- contents_side_l終わり -->
54		
55		<div class="contents_side_r">
56			<h3>contents_side_r</h3>
57			<ul>
58				<li>ここは</li>
59				<li>コンテンツの</li>
60				<li><span>右</span></li>
61				<li>です</li>
62				<li>position:absolute;</li>
63				<li>で右に位置</li>
64				<li>させたいです</li>
65			</u/>
66		</div><!--------------------------- contents_side_r終わり -->
67
68	<div id="footer">
69		<p>footer</p>
70	</div><!--------------------------- footer終わり -->
71
72
73</div><!--------------------------- wrapper終わり -->
74
75
76
77</body>
78</html>
79

↓全体(CSS)

css
1@charset "utf-8";
2
3*{
4	margin:0;
5	padding:0;
6}
7
8
9
10span{
11	color:#ff0000;
12	font-weight:bold;
13}
14
15
16/*	wrapper	*/
17
18#wrapper{
19	width:820px;
20	margin:0 auto;
21	text-align:center;
22	background-color:#a9a9a9;
23}
24
25
26/*	header	*/
27
28#header{
29	width:800px;
30	height:126px;
31	margin:0 auto;
32	background-color:#b0c4de;
33
34}
35
36
37/*	menu		*/
38
39
40#menu{
41	width:800px;
42	margin:0 auto;
43	background-color:#db7093;
44}
45
46
47
48/*	contents		*/
49
50#contents{
51	width:764px;
52	margin:0 auto;
53	padding:12px 18px 0;
54	position: relative;
55}
56
57
58
59
60.contents_side_c{
61	width:428px;
62	background-color:#cd853f;
63	position: absolute;
64	left:0;
65	top:0;
66	margin:auto;
67}
68
69.contents_side_c::before {
70	content:'';
71	display:block;
72	padding-top:100%;
73}
74
75
76
77
78.contents_side_l{
79	width:155px;
80	margin:0 13px 0 0;
81	background-color:#7fff00;
82	position: absolute;
83	left:0;
84}
85
86
87
88
89.contents_side_r{
90	width:155px;
91	background-color:#483d8b;
92	position: absolute;
93	right:0;
94	
95}
96
97
98
99
100/*   fotter   */
101
102#footer{
103	width:800px;
104	height:38px;
105	background-color:#deb887;
106}

【positionについての知識】
・absoluteを使うと高さの領域が確保されないので、別で高さを用意しなければならない

<試し>
上記のcssの#wrapperにpadding-bottom: 100%;を追加
→#wrapperの高さはできたが#contentsの高さに合っていない
#footerに動きなし

・左右真ん中はtransform: translateでネガティブマージンを使って位置の調整ができる
→topが効かない

css
1.contents_side_c{
2	width:428px;
3	background-color:#cd853f;
4	position: absolute;
5	top: 50%;
6	left: 50%;
7	transform: translate(-50%,-50%);
8}

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

回答2件

こんにちは。

absoluteを使うと高さの領域が確保されないので、別で高さを用意しなければならない

親要素の高さが確保されない、という意味ですよね？　ご理解の通りです。
ですので、『「#wrapper」の高さが可変しない』のは、CSSではどうしようもないことです。諦めてください。

「.contents_side_c」がセンターにこない

right: autoが原因です。right: 0としてみてください。
下記の表の一番下「✘　✘　✔」になっている状態ですので、「auto margins → zero」となります。
right: 0として指定することによって「✘　✘　✘」に変わり、「margins split positive free space」（訳：それぞれのマージンは余白を分けます）となります。
5.1. The Width of Absolutely-Positioned, Non-Replaced Elements | CSS Positioned Layout Module Level 3

投稿2021/05/26 01:47

Lhankor_Mhy

総合スコア36119

hasune

2021/05/28 11:20 編集

お返事が遅くなってしまい大変申し訳ありません。以下に修正してセンターに寄せることができました。ありがとうございます。教えていただいたページを参考にもっと勉強したいと思います。ご回答いただきありがとうございました！ .contents_side_c{ width:428px; background-color:#cd853f; position: absolute; left:0; top:0; right:0; margin:auto; }

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

ベストアンサー

希望の回答になっていないかもですが、position:absolute;ではなくdisplay:flex;を使ってレイアウトするように変えてみた例です。このほうがいろいろやりやすいと思います。良かったら参考にしてください。

HTML
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
3
4
5<html lang="ja">
6<head>
7<link href="css/reset.css" rel="stylesheet" type="text/css">
8<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
9
10<title>練習3</title>
11
12<link rel="stylesheet" type="text/css" href="css/style.css">
13</head>
14
15<body>
16
17<div id="wrapper">
18
19    <div id="header">
20        <h1>header</h1>
21    </div><!--------------------------- header終わり -->
22
23    <div id="menu">
24        <p>menu</p>
25    </div><!--------------------------- menu終わり -->
26
27    <div id="contents">
28        <div class="contents_side_c">
29            <h2>contents_side_c</h2>
30            <ul>
31                <li>ここは</li>
32                <li>コンテンツの</li>
33                <li><span>センター</span></li>
34                <li>です</li>
35                <li>order:1;</li>
36                <li>で左から2番目（センター）に位置</li>
37                <li>させています</li>
38            </ul>
39
40        </div><!--------------------------- contents_side_c終わり -->
41
42        <div class="contents_side_l">
43            <h3>contents_side_l</h3>
44            <ul>
45                <li>ここは</li>
46                <li>コンテンツの</li>
47                <li><span>左</span></li>
48                <li>です</li>
49                <li>order:0;</li>
50                <li>で左に位置</li>
51                <li>させています</li>
52            </ul>
53        </div><!--------------------------- contents_side_l終わり -->
54
55        <div class="contents_side_r">
56            <h3>contents_side_r</h3>
57            <ul>
58                <li>ここは</li>
59                <li>コンテンツの</li>
60                <li><span>右</span></li>
61                <li>です</li>
62                <li>order:2;</li>
63                <li>で右に位置</li>
64                <li>させています</li>
65            </ul>
66        </div><!--------------------------- contents_side_r終わり -->
67  </div>
68
69    <div id="footer">
70        <p>footer</p>
71    </div><!--------------------------- footer終わり -->
72
73
74</div><!--------------------------- wrapper終わり -->
75
76
77
78</body>
79</html>

CSS
1@charset "utf-8";
2
3*{
4    margin:0;
5    padding:0;
6}
7
8
9
10span{
11    color:#ff0000;
12    font-weight:bold;
13}
14
15
16/*    wrapper    */
17
18#wrapper{
19    width:820px;
20    height:600px;
21    margin:0 auto;
22    text-align:center;
23    background-color:#a9a9a9;
24}
25
26
27/*    header    */
28
29#header{
30    width:800px;
31    height:126px;
32    margin:0 auto;
33    background-color:#b0c4de;
34
35}
36
37
38/*    menu        */
39
40
41#menu{
42    width:800px;
43    margin:0 auto;
44    background-color:#db7093;
45}
46
47
48
49/*    contents        */
50
51#contents{
52    width:764px;
53    margin:0 auto;
54    padding:12px 18px 0;
55    display:flex;
56    justify-content:space-between;
57}
58
59.contents_side_c{
60    order:1;
61    width:428px;
62    background-color:#cd853f;
63}
64
65.contents_side_l{
66    order:0;
67    width:155px;
68    margin:0 13px 0 0;
69    background-color:#7fff00;
70}
71
72.contents_side_r{
73    order:2;
74    width:155px;
75    background-color:#483d8b;
76}
77
78/*   fotter   */
79
80#footer{
81    width:800px;
82    height:38px;
83    background-color:#deb887;
84}

投稿2021/05/25 12:29

編集2021/05/25 12:30

itagagaki

総合スコア8402

hasune

2021/05/28 11:04

お返事が遅くなってしまい大変申し訳ありません。 display:flex;というのは初めて知りました。試してみたところ思い通りの配置になりました。これほどまでに簡単にできる且つどうやらdisplay:flex;で配置するのが主流なのであれば、無理にpositionにこだわる必要はなさそうですね。勉強になりました。ご回答いただきありがとうございます！

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

あなたの回答