![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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ランキング
-
ホームページビルダー15で作っ...
-
ホームページの画面文字を濃く...
-
ホームページを作りたいのです...
-
既存画像(gif または png)の背...
-
ホームページを作ろうかと
-
メールフォーム設置の文字化け...
-
ホームページビルダー
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ページの内容コピペ 範囲が広い...
-
ビフォアーアフターのページは...
-
今さらですがHPを作成するに当...
-
ホームページ制作で教えてくだ...
-
ホームページビルダーおすすめ?
-
GASについて
-
無料でホームページを作成した...
-
ホームページを作成したいので...
-
ホームページビルダー21で作成...
-
入社1年半目です。自習でシェア...
-
Chat GPTについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
cnt <= (others => '0'); の意...
-
pythonでのカーソル移動がずれる
-
Excel VBAでのIE操作でクリック...
-
質問です。 新規登録ボタンが全...
-
safariで見るとページ上部に余...
-
CSSで、何故か、「float」が上...
-
vbaでieを操作しようとしていま...
-
VBAでの素数の求め方
-
css リンクの色が全部変わって...
-
SEO 検索エンジンについて
-
初歩的ですが・・・
-
CSSセクレター 子孫のみに適用...
-
DIVの入れ子で、FireFoxだとレ...
-
Ajaxで文字列を表示したいです。
-
ワードプレスで何度消しても空...
-
RubyのHTMLパーサーで複数のタ...
-
最初の文字後ろのスペースを大...
-
検索結果がツリー状に表示され...
-
IEとFireFoxの表示の違いで悩ん...
おすすめ情報