DIVの入れ子で、FireFoxだとレイアウトが崩れる。
http://www.cool-vivi.com/?p=222
このサイトの通りにやったのですが、
FireFoxだとうまく表示されません。
下記のソースから<div id="main">を消して、入れ子じゃない状態にするとうまくいきます。
どうすればいいでしょうか?
<div id="main">
<div id="menu">
</div>
<div id="contents">
</div>
</div>
No.2ベストアンサー
- 回答日時:
IEは、高さ指定しなくても自動的に調整するようにできています。
しかし、その他のブラウザでは、高さは自動的に補完されません。かといって、高さをピクセル指定すると、文字のみ拡大したときにおかしな具合になります。
高さを指定するのは、特別な場合、たとえば画像だけを配置するときなどです。
そこで、clear:both;が良く使用されます。
<div id=cont">
<div id="head"></div>
<div id="left">
</div>
<div id="right">
</div>
<div id="footter">copy right (c) aaaaaaaa</div>
</div>
#cont{
clear:both;
width:800px;
}
#head{
width:800px;
height:50px;
clear:both;
/*画像のヘッダーの場合は高さを指定可能*/
}
#left{
width:200px;
float:left;
}
#right{
float:right;
width:600px;
}
#footter {
width:800px;
height:2em;
line-height:2em;
clear:both;
}
とすると、IEでも、firefoxでも崩れないとおもいますよ。
ここで、head と footterが clear:both;
であることが、要点つまり、こつです。
こうすると、回り込みしなくなります。
つまり左右になにも配置しないことを意味します。
#1のクリヤ問題はこのことです。
IEでは、clear:both;しなくても、contの中にすべてを含めてくれるかもしれませんね。
つまり、高さを自動的に補完してくれます。
No.1
- 回答日時:
何が上手くいかないのか?、CSSが無いと誰も回答出来ないよ。
Firefoxって事だから、旧IEを使ってる思うけど誤解釈、おそらくクリアーの問題かな?
色々方法があるけど、
<div id="main">
<div id="menu">
</div>
<div id="contents">
</div>
<div style="clear: both;">
</div>
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
VBAでの素数の求め方
-
検索結果がツリー状に表示され...
-
Excel VBAでのIE操作でクリック...
-
htmlの文字が縦書きになる
-
質問1.
-
タグは大文字と小文字どちらが...
-
画像の場合のみ、下線を消す方...
-
Macで画像の切り抜きできないの?
-
CSSがなぜかfont-sizeだけ効か...
-
リストの並べ替え
-
table で画像をピッタリとくっ...
-
ボタンを横に並べて表示させる方法
-
div要素が重なってします
-
親要素・子要素
-
HTML属性での「""」 「''」違い
-
CSSでボックスのheightが0になる
-
HRタグ 枠線を透明にするには?
-
HTMLは、シングルクォートかダ...
-
<ul><li></li></ul>にするメリ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
pythonでのカーソル移動がずれる
-
ASP.NETでプレーンなページに文...
-
safariで見るとページ上部に余...
-
Excel VBAでのIE操作でクリック...
-
検索結果がツリー状に表示され...
-
cnt <= (others => '0'); の意...
-
VBA : QueryTableでのスクレイ...
-
質問です。 新規登録ボタンが全...
-
入れ子になっているhtmlのXPath...
-
プログラマーの方に質問です。 ...
-
VBAでの素数の求め方
-
DIVの入れ子で、FireFoxだとレ...
-
行頭から全角で3文字位さげた...
-
css リンクの色が全部変わって...
-
CSSで、何故か、「float」が上...
-
秀丸で複数行コメントアウトを...
-
chromedriverのver-upで動作不...
-
背景が動くWEBページの作り方に...
-
同じIE8なのに機種によってmarg...
-
HTMLの出力で改行をさせない方...
おすすめ情報