2015/02/11

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

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

float-two-css

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

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

overflow: hidden;

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

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

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

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

コメントはこちらから

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

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

scroll to tpp