floatを2回使うと背景画像が表示されない

2015/02/11

CSS

自分用のメモとして、wordpressのオリジナルテーマのリニューアルのため制作中の話ですが、floatを2回使用したところ背景画像が切れている。何度かこの問題発生したときにググって修復した記憶があるのだが、overflow:autoかhiddenで悩みまたググってしまった。

no_imagae
float-two-css

ぐぐってみるとこちらのサイト様で
詳細に説明してくださっていた。

親ボックスと子ボックス両方に

overflow: hidden;

をいれてあげると無事解決した。
有難うございました。

私は最初overflow:autoでいけるかなと考えていたが、firefoxで確認したところある一定の横幅にてスクロールバーがでてしまったので、やはりautoではなくhiddenが適切。

あとclearfixというfloatをかけたあとclearを使わないでいいという便利なタグがあります。
どちらを利用するかは、未だ議論されておりますが私はoverflow派でclearfixは使用したことが無いです。

レスポンシブ・ウェブデザイン制作では、overflowとpositionをよく使用するのでしっかりと理解して、
覚えておかなれければならいないなと自分を戒めています。

コメントはこちらから

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事へのトラックバック

人気ランキング