mozila系ブラウザでのブロック要素の配置

0   名前： たなしん ： 2005/06/05 00:09
<html lang="ja">
<head>
<title></title>
</head>

<body>
<!--大ブロックstart-->
<div style="width: 700px; margin: 0 auto; padding: 0; border: 1px solid black;">

<div style="float:left; width: 200px; margin: 0; padding: 0; background-color: #ff9;">
ブロック小1</div>

<div style="float:left; width: 300px; margin: 0; padding: 0; background-color: #99f;">
ブロック小２</div>

</div><!--大ブロック end-->

</body>
</html>

NN7.1で、700ピクセルの大ブロックの中に「小ブロック1」と「小ブロック２」
が入りません。（大ブロックに「height」を指定すれば入りますが。）
見た目で詳しく言うと、700ピクセルのブロックが上下つぶれてただの横線になり、
その横線にぶら下がるように「小ブロック1」と「小ブロック1」が配置されて
しまいます。
IEだと大丈夫です。
どこか間違っていますか？
1   名前： び ： 2005/06/05 00:09  ［URL］
floatによって浮動した要素は、通常フローに属さないので、
height:autoの時にはその計算には含まれず、
Mozillaではそのようになります。

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#Computing_heights_and_margins

ブロック小２の後で、floatをclearするとよいです。
2   名前： たなしん ： 2005/06/05 00:09
び さんお返事、ならびに回答感謝します！
3   名前： たなしん ： 2005/06/05 00:09
と、びさんのご紹介のページを見てみましたが難しいですね。

>>ブロック小２の後で、floatをclearするとよいです。

とありますが、私の例で言うとブロック小２の後には何の要素も無いので
例えば　<br style="clear: left;">　などと新たに何かしらの要素を
書き加えなければならないと言う事でしょうか？
確かにうまくいきましたが、<br>で良かったのか自信ありません。
4   名前： び ： 2005/06/05 00:09  ［URL］
そうですね。難しいところです。
何かの要素を加えなければいけません。

<br>だと気持ちが悪いのであれば
大ブロックに関わる何らかの情報を加えるというテもありますが
やっぱり本末転倒ですし、
無理にこのようなことをすると、
<br>一つよりも、文書の価値が低下する原因になるかもしれません。
5   名前： Pid ： 2005/06/05 00:09
hr 要素はどうでしょうか。{ visibility: hidden; } しておけばさほど邪魔になりませんし，スタイルが適用されない環境での区切りとして割と便利ですし。

もちろん，実際の文書構造を優先するのは言うまでもありませんが。
6   名前： たなしん ： 2005/06/05 00:09
びさん、Pidさん、素人相手に返答下さり感謝します。
<br>も手段としては間違っていなさそうなのでほっとしました。
<hr>も一つの手段として引き出しに入れておきます。
ありがとうございました。
一覧へ戻る