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

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

新規登録して質問してみよう
ただいま回答率
85.51%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

Q&A

解決済

2回答

1970閲覧

IE6でoverflow:hiddenが効かないことについて

Petapeta

総合スコア8

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

0グッド

0クリップ

投稿2017/05/13 13:52

編集2017/05/22 08:45

###前提・実現したいこと
CSS でホームページの画面を作成しております。
ウィンドウの幅を狭くしたときに、Floatを使っていても、右側のカラムが下に落ちずに、そのまま隠れてくれるようにしたいです。

###発生している問題・エラーメッセージ
Chromeなどの普通のブラウザでは、widthを設定して、overflow:hiddenを指定すれば、ウィンドウ幅を狭くしたときも形が崩れず上手く隠れてくれましたが、IE6に対応させる際に、IE6ではoverflow:hiddenが効かないようでした。
そして、ウィンドウ幅を狭くすると、右側のカラムが下へ落ちてしまいます。
IE6でfloatを使っても形が崩れないようにするにはどうしたらよいでしょうか。

ソースコードを、簡易なもので作ってみました。現段階ですと、ウィンドウを縮めると、ie6ではボックスが上下にずれてしまいますが、それをウィンドウに隠れて見えなくし、形が崩れないようにしたいです。

###該当のソースコード

``<html> <head> <style> .container{ background-color:#696969; overflow:hidden; } .sideber{ background-color:#3cb371; width:300px; float:left; } .contents{ background-color:#dcdcdc; width:300px; froat:right; } </style> </head> <body> <div class="container"> <div class="sideber"> テキスト </div> <div class="contents"> フロート </div> </div> </body> </html>

###試したこと
ネットで検索して出てきたので、position:relativeやdisplay:inline-blockを書き足してみましたが、特に何も反応がありませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
ご回答をいただいたソースで実際に動きましたが、Container を二重にして、中にwidthをつけるだけで上手く隠れるのは何故なのかがよくわからず、どのような発想に基づいているのかが知りたいです。
また、overflow :hiddenはなぜ2つ付けるのでしょうか。
今後のために考え方などを教えていただけるとありがたいです。

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

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

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

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

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

kei344

2017/05/14 05:37

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
Petapeta

2017/05/14 11:53

ご指摘ありがとうございます!頑張って再現するものを作ってみます。
kei344

2017/05/15 11:58

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

2017/05/16 12:13

申し訳ありません。初めて利用するため見落としておりました。次から気をつけます。
kei344

2017/05/16 12:23

ここは「質問への追記・修正、ベストアンサー選択の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。
kei344

2017/05/16 15:42

修正依頼については読まれていないのですね・・・。
guest

回答2

0

本題ではありませんが、本当にIE6への対応は必要ですか

Windows Vistaすらサポートを終えている上に、IEのサポートポリシーも変化して、その環境で使える最新のIEだけがサポート対象となっています。つまり、いまマイクロソフトがサポートを行うIEは、IE11以外ではWindows Server 2012上のIE10だけです。

アクセスログを見て、有意な利用者数がいる状況ならともかく、もうIE6や7はサポート打ち切りで全く問題ないと思います。

投稿2017/05/13 14:22

maisumakun

総合スコア145064

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

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

Petapeta

2017/05/14 04:47

ご回答ありがとうございます! Windows VistaさえもうIE6をサポートしていないのですね。 はじめて知りました! それは打ち切ってしまったほうがよさですね。 ただ、私の所属する会社ではまだ対応する方針のようで、私には方針を決定する権限がありません。 新入社員として、CSSを使いこなせるようになることを目的とした課題に取り組んでいまして、それをクリアしなければ進めない状況にあります。
guest

0

ベストアンサー

未テストですが。

HTML

1<div class="container"> 2<div class="container-inner"> 3 4<div class="sideber"> 5 6テキスト 7 8</div> 9 10<div class="contents"> 11 12フロート 13 14</div> 15 16</div> 17</div>

CSS

1.container { 2 background-color: #696969; 3 overflow: hidden; 4} 5.container-inner { 6 width: 600px; 7 overflow: hidden; 8} 9.sideber { 10 background-color: #3cb371; 11 width: 300px; 12 float: left; 13} 14.contents { 15 background-color: #dcdcdc; 16 width: 300px; 17 float: right; 18}

投稿2017/05/15 12:02

kei344

総合スコア69357

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

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

Petapeta

2017/05/16 12:20

ご回答ありがとうございます! 実際に上手く動きました。 Container を二重にして、中にwidthをつけるだけ上手く隠れるのですね。不思議です。 また、overflow :hiddenはなぜ2つ付けるのでしょうか。 よろしければ、今後のために考え方や発想など、ご指導いただければ幸いです。
kei344

2017/05/16 17:03

> Container を二重にして、中にwidthをつけるだけ上手く隠れるのですね。不思議です。 不思議でもなんでもなく、幅の決まったfloatは外側の要素の幅が狭くなったら横に並びません。 「2つ付ける」という表現が良くわかりませんが、必要だろうと思うから付けています。外側は隠すため、内側は高さを持たないfloatされた要素を内包するので念のため、という感じでしょうか。 また、「質問への追記・修正、ベストアンサー選択の依頼」でも依頼していますが、質問文のコードはコードブロックで囲んでください。 ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
Petapeta

2017/05/18 10:19

ご回答ありがとうございます。 コードブロックでの囲み方は、何度も試しましたがわかりにくく、上手くできませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問