footerを最下部に配置したいのですが上手くいきません。

#####分からないこと
footerを最下部に配置したいのですが、写真の通り左カラムの下から配置されてしまいます。どうすれば右カラムの下部から配置できるか教えてください。

#####試したこと
footerタグにbottom:0;

html
1    <main-left>
2        <div class="container">
3            <div class="main-left-wrapper">
4                <div class="category">
5                    <h2>タイトルテキスト</h2>
6                    <p>2020/01/01</p>
7                    <img src="images/ranking1.jpg" alt="メインレフト画像">
8                    <p2>本文テキストテキストテキストテキストテキストテキストテキスト</p2>
9                    <li><a href="#">READ MORE</a></li>
10                </div>
11                <div class="category">
12                    <h2>タイトルテキスト</h2>
13                    <p>2020/01/01</p>
14                    <img src="images/ranking1.jpg" alt="メインレフト画像">
15                    <p2>本文テキストテキストテキストテキストテキストテキストテキスト</p2>
16                    <li><a href="#">READ MORE</a></li>
17                </div>
18            </div>
19
20            <div class="main-right-wrapper">
21                <img src="images/ranking1.jpg" alt="プロフィール画像">
22                <h2>name name</h2>
23                <p>テキストテキストテキストテキストテキストテキスト</p>
24                <h2>Ranking</h2>
25            </div>
26            <div class="ranking">    
27                <img src="images/ranking1.jpg" alt="ランキング1">
28                <p>テキストテキストテキストテキストテキストテキスト</p>
29                <img src="images/ranking2.jpg" alt="ランキング２">
30                <p>テキストテキストテキストテキストテキストテキスト</p>
31                <img src="images/ranking3.jpg" alt="ランキング３">
32                <p>テキストテキストテキストテキストテキストテキスト</p>
33            </div>
34            <div class="archive">
35                <h2>Archive</h2>
36                <p><a href="#">XXXX年XX月(XX)</a></p>
37                <p><a href="#">XXXX年XX月(XX)</a></p>
38                <p><a href="#">XXXX年XX月(XX)</a></p>
39                <p><a href="#">XXXX年XX月(XX)</a></p>
40                <p><a href="#">XXXX年XX月(XX)</a></p>
41                <p><a href="#">XXXX年XX月(XX)</a></p>
42                <p><a href="#">XXXX年XX月(XX)</a></p>
43            </div>    
44        </div>
45    </main-left>
46    
47
48    <!-- ここからfooter -->
49    <footer>
50        <div class="container">
51            <div class="footer-id">
52                    <h2>About</h2>
53                    <p>テキストテキストテキストテキストテキストテキストテキスト</p>
54                    <h2>Menu</h2>
55                    <p>テキストテキストテキストテキストテキストテキストテキスト</p>
56                    <h2>Twitter</h2>
57                    <p>テキストテキストテキストテキストテキストテキストテキスト</p>
58                </div>
59            </div>    
60            </div>  
61        </div>
62    </footer>

css
1
2/* ------------
3    main-left
4   ------------ */
5
6.main-left-wrapper{
7    width:60%;
8    float:left;
9}
10
11.category{
12    margin:80px 20px;
13}
14
15.category img{
16    width:100%;
17    margin:10px 0;
18}
19
20.category h2{
21    font-family:arial;
22}
23
24.category p{
25    margin:10px 0;
26    font-family:10px;
27    color:gray;
28}
29
30.category p2{
31    display: flex;
32    justify-content: center;
33    font-size:18px;
34}
35
36.category li{
37    list-style:none;
38    text-align: center;
39    margin-top:20px;
40}
41
42.category li a{
43    text-decoration: none;
44}
45
46/* -----------
47   main-right
48   -----------*/
49
50.main-right-wrapper{
51    width:35%;
52    float:right;
53    text-align: center;
54    margin-bottom:30px;
55}
56
57.main-right-wrapper img{
58    width:100px;
59    height:100px;
60    border-radius: 50%;
61    margin-top:100px;
62}
63
64.main-right-wrapper h2{
65    font-family:arial;
66    font-weight:lighter;
67    margin-top:20px;
68}
69
70.main-right-wrapper p{
71    margin-top:20px;
72}
73
74.ranking{
75    width:35%;
76    float:right;
77}
78
79.ranking img{
80    width:100%;
81}
82
83.archive{
84    width:35%;
85    float:right;
86}
87
88.archive h2{
89    font-family: arial;
90    font-weight:lighter;
91    text-align: center;
92    margin:20px;
93}
94
95.archive p{
96    margin:20px 0;
97}
98
99.archive a{
100    font-family:arial;
101    text-decoration: none;
102    color:black;
103}
104
105/* -----------
106   footer
107   -----------*/
108
109.footer{
110    bottom:0;
111    display: flex;
112}
113
114.footer-id{
115    justify-content: space-between;
116}

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

回答2件

CSSに.footerというセレクタがありますが、footerというクラスはありませんね。
<footer>タグに指定したいのでしょうから、きっとCSSの.footerはfooterの誤りですね。
で、そのfooterにclear: both;を追加すれば、とりあえずは回り込みは解除されます。
でもhatena19さんのおっしゃるようにflexなどでレイアウトするほうがよろしいかと。

投稿2021/05/04 01:12

itagagaki

総合スコア8402

rzysssipy

2021/05/05 01:09

ご丁寧に回答いただき有難うございます。 flexでも配置できるよう勉強してみます。

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

ベストアンサー

float:left; float:right; を使ってレイアウトを決めているのが原因です。
floatを使うと通常のフローから外れてレイアウトされますので、後に続く要素が上に移動してしまいます。
それを防ぐためには、float を解除する必要があります。いろいろ方法がありますので、下記を参考にしてください。

floatを解除する5つの方法（clearfix overflow:hidden; display:flow-root; clear:both; height）

floatを使ったレイアウトは上記のようにいろいろ面倒です。今となっては古い手法です。
今なら、flex か　grid を使うレイアウトが主流です。

<main-left>というタグを使ってますが、このようなタグはありません。タグを勝手に作ることはできません。ここは<main>にしておくべきです。

その上で、例えば、下記のコードを追加すれば、floatの回り込みを解除できます。