質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

2738閲覧

Clearfixが効いてない?floatが治らない

Bass_dora

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/06/17 07:31

編集2019/06/17 07:45

前提・実現したいこと

記事のboxがフッターを突き抜けてかぶさってしまってるレイアウトを直したいです。
イメージ説明

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

なぜフッターがあの位置にあるのかと言いますと、ヘッダー・フッター以外の要素を内包する<div class="wrapper clearfix">の縦幅がそこまでになってしまっているからです。wrapperにheightの指定はしていないため、本来は記事のboxの数に合わせて伸縮してほしいのですが、記事にfloatをかけているのが修正されてないせいか、記事の一番下まで含んでくれません。
イメージ説明

記事は <a href="#" class=article-box>です。それぞれdisplay:block;を指定し、奇数番目にはfloat:left; 偶数番目にはfloat:right; をかけているのですが、article-boxの親要素 <div article-container>にはclearfix classを持たせてるため、突き抜けないように指定してるはずなんですが。。。うまくいきません。またwrapperにもclearfixを指定してるはずですが、こちらも効果がないみたいです。
イメージ説明

ウェブサイトを作るのは初めてで、「HTML5/CSS3 モダンコーディング」という教科書のPart 1の内容をほぼ丸写ししてるので、問題はないはずなのですが。。。

試したこと

・wrapper, article-container 以外の親要素にもclearfixを指定してみたがダメだった。
・floatを解除してみたら、article-boxが全て縦並びになってしまったため、floatの書き方自体は間違ってないはず。
・clearfixの使い方をググってみたが、間違ってなかった。
・使ってる教科書の模範コードをもう一度よく見直してみたが、間違いは見当たらなかった。
・twitterで質問してみたところ、「わからないのでteratailで聞いてみては?」と言われたので登録した。

#HTMLのソースコード(一部)

<!DOCTYPE html> <html lang="ja"> <head>(中略)</head> <body> <header>(中略)</header> <div class="wrapper clearfix"> <main class="main"> (中略) <div class="articles"> <h2 class="hidden">ARTICLES</h2> <div class="article-container clearfix"> <a href='#' class="article-box"> <h3 class="title">東京事変・刄田綴色の鉄板フレーズ集!!</h3> <p class="desc">伝説のバンド・東京事変のグルーヴを支えたサウスポー・刄田綴色の十八番フレーズを徹底解明!!</p> <time class="date" datetime="2019-06-11">2019.06.11 TUE</time><img class="image" src="images/DorStLlUYAAUvUw.jpg"> </a> <a href='#' class="article-box"> <h3 class="title">フィルインのバリエーションを増やす5つのコツ!!</h3> <p class="desc">ありがちなフィルインばかり叩いてませんか?おなじみのフィルインに少しひねりを加えるだけでグンとおしゃれにすることが出来ちゃうんです!!</p> <time class="date" datetime="2019-06-05">2019.06.05 THU</time><img class="image" src="images/drumfills.gif"> </a> <a href='#' class="article-box"> <h3 class="title">ツーバスドコドコしよう!ダプルペダルを極める</h3> <p class="desc">メタル・ドラミングにおいて重要な役割を担うツーバスドコドコ。今回はそれをマスターするうえで</p> <time class="date" datetime="2019-06-01">2019.06.01 SUN</time><img class="image" src="images/tama-power-glide-double-pedal-iron-cobra-case-heavy-metal-fast-feet.jpg"> </a> <a href='#' class="article-box"> <h3 class="title">ベースとドラムは仲良くすべし!リズム隊の極意</h3> <p class="desc">バンド演奏において「リズム隊」と呼ばれるベースとドラム。二人の息が合わされば音楽がよりドッシリと聴こえるようになるぞ!</p> <time class="date" datetime="2019-05-30">2019.05.30 FRI</time><img class="image" src="images/7374081962_c7eedd08f5_b.jpg"> </a> </div> </div> </main> <div class="sidemenu"> (中略) </div> </div> <footer class="footer clearfix"> <ul class="horizontal-list"> <li class="horizontal-item"><a href="#">ABOUT ME</a></li> <li class="horizontal-item"><a href="#">SITE MAP</a></li> <li class="horizontal-item"><a href="#">SNS</a></li> <li class="horizontal-item"><a href="#">CONTACT</a></li> </ul> </footer>

#CSSのソースコード(一部)

.clearfix::after{ content:''; display:block; clear:both; } .wrapper{ width:970px; margin:30px auto 40px; } main{ display:block; float:left; width:660px; height:500px; } .sidemenu{ float:right; width: height:500px; } .article-box{ display:block; width:315px; height:360px; margin:30px 0px; position:relative; width:315px; padding:210px 15px 0; box-shadow:8px 8px 10px -4px rgba(0,0,0,0.5); transition: opacity 0.15s; background-color:white; } .article-box:hover{ opacity:0.75; } .article-box:nth-of-type(odd){ float:left; } .article-box:nth-of-type(even){ float:right; } .article-box .title{ margin-top:15px; color:#555; font-size:1.4rem; line-height:1.6; } .article-box .desc{ margin-top:5px; color:#333; font-size:0.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .article-box .image{ position:absolute; top:0; left:0; width:100%; height:200px; } .article-box .date{ position: absolute; right:0; bottom:15px; display:block; width:160px; padding:4px; background-color:#d03c53; color:white; text-align:center; letter-spacing:1px; font-size:0.9rem; } .footer{ width:100%; height:100px; padding:20px 0 30px; background-color: #2d3d54; color:white; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/06/17 07:41

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
Bass_dora

2019/06/17 07:46

ご回答ありがとうございます。編集させていただきました。ただし字数制限の都合でかなりはしょってます。
guest

回答2

0

ベストアンサー

mainheight: 500px;が設定されているからでは?

投稿2019/06/17 07:48

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Bass_dora

2019/06/17 07:55

あ。。。。!ほんまや。。。。! 治りました!!まさかこんな単純なミスだっとは。。。笑 気づきませんでした!!!本当にありがとうございます!!!!
guest

0

フッターに

clear:both;
overflow:hidden;

のどちらかのcssで解決するかと思います!

投稿2019/06/17 07:37

hideprog

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Bass_dora

2019/06/17 07:40

ご回答ありがとうございます。どちらも試しましたが治らないです。そもそもfooterにclearfixを指定してるのでclear:bothはもう効いてるはずなんです。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問