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ランキング
-
chromedriverのver-upで動作不...
-
VBAでの素数の求め方
-
Ajaxで文字列を表示したいです。
-
ワードプレスで何度消しても空...
-
HP作成に於いて、スマホでのサ...
-
質問です。 新規登録ボタンが全...
-
Dreamweaver8で表を作成したい
-
1から100までの自然数のうち、2...
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
カラープレーンってなんですか?
-
超音波で洗脳。
-
line-height指定で発生する余白...
-
htmlの文字が縦書きになる
-
ポップアップメニューの作成方...
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
HTMLタグのDL DT DDを使ってli...
-
CSS/日本語のID・クラス名につ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ASP.NETでプレーンなページに文...
-
pythonでのカーソル移動がずれる
-
cnt <= (others => '0'); の意...
-
Excel VBAでのIE操作でクリック...
-
検索結果がツリー状に表示され...
-
VBAでの素数の求め方
-
秀丸で複数行コメントアウトを...
-
質問です。 新規登録ボタンが全...
-
chromedriverのver-upで動作不...
-
safariで見るとページ上部に余...
-
Firefoxで別ページのアンカーリ...
-
行頭から全角で3文字位さげた...
-
プログラマーの方に質問です。 ...
-
背景が動くWEBページの作り方に...
-
css リンクの色が全部変わって...
-
Ajaxで文字列を表示したいです。
-
同じIE8なのに機種によってmarg...
-
携帯サイトの背景色
-
VBA : QueryTableでのスクレイ...
-
htmlの文字が縦書きになる
おすすめ情報