cssでフロートを使用した段組について。

質問

記述にドリームウィーバーMX2004を使用し、ブラウザーにIE6を使用しています。

例えば、幅800pxのメインボックスを作って、その中に、幅400px、高さ200pxのレフトボックス（float:leftで左寄せ）と
幅300px、高さ200px(float:rightで右寄せ）のライトボックスを作りたいとします。
（左右ボックスの間に100pxの隙間を開ける）

まず、こんな感じでhtmlを記述したと仮定してください。

<div class="mainbox">
<div class="leftbox">左側</div>

</div>

（とりあえず、左側のボックスを作る）

で、cssをとりあえずここまで記述します。

.mainbox {
width: 800px;
background-color: #666666;
}
(分りやすくする為に背景色を付けておきます）

.leftbox {
width: 400px;
height:200px;
background-color: #666666;
}
（こちらも別の背景色を付けておきます）

この時点ではfloatを指定していません。
で、この時点ですと、レフトボックスの高さに合わせてメインボックスの高さも200pxになりますよね？

ですが、leftboxにfloat:leftを指定すると、mainboxの高さがなくなってしまいます。

また、続けて予定通りにrightboxを右にフロートさせてもmainboxの高さは無視されてしまいます。

こういった場合はmainboxの高さを指定しないといけないのでしょうか？

mainboxに高さ200pxを指定すれば意図したとおりに表示されるのですが、この場合に中のどちらか（仮にleftbox）の高さが200pxを超えると、ドリームウィーバーの編集画面上はmainboxの高さは200pxのままで、IE6上ではleftboxに合わせてmainboxの高さも伸びた状態で表示されます。

こういった状態がcssの仕様なのか、ブラウザによるものなのかを知りたいと思っています。

トンチンカンなことを書いてるのかもしれませんが、教えて頂けると幸いです。

回答No.1

kuronekoyarou · ベストアンサー

基本的にfloatを使った場合には、floatのクリアをしないといけません。
しなかった場合、
＞ですが、leftboxにfloat:leftを指定すると、mainboxの高さがなくなってしまいます。
となるのはCSSの仕様です。

また、
＞IE6上ではleftboxに合わせてmainboxの高さも伸びた状態で表示されます。
となるのはIEのバグです。

で正解としてはHTMLのソースが
<div class="mainbox">
<div class="leftbox"></div>
<div class="rightbox"></div>
<br class="clear">
</div>

CSSを
.clear {
clear:both;
}
とするのが一番シンプルなやり方です。floatのクリアするためだけに<br>を入れるというのは個人的には好きじゃないですが…。
heightは基本的に指定しない方がいいでしょう。文字サイズを大きくして見たりする場合に、文字があふれちゃったりしますので…

お礼

floatのクリアーですか。
例えば私の例に追加して、下にフッターなんかを作る場合にclear:bothを指定するような解説は見かけたことがあったので、漠然とは認識していたのですが、今回の例のような場合に疑問が生じていました。

<br class="clear">
こいった使い方を知らなかったので大変参考になりました。
解決することが出来ました。ありがとう御座います。

また、cssの仕様と、IEのバグについても理解いたしました。
重ねてありがとう御座います。

回答No.4

armstrong-us

問題点はすでに解決されているようなので、割愛させていただきます。

CSSでレイアウトを組む場合、オーサリングソフトでCSSを実装していくには、やはり限界があります。
まだcssに完全に対応しきれていないということです。実際cssの親子関係が複雑になったりするとうまく対応出来ていません。
だからドリームウイーバーの編集画面では崩れていても、web上ではきちんと表示されたりするわけです。
CSSで枠組みをする多くのwebデザイナー＆コーディング担当の人間はエディターを使って、地道に確認しながら制作しています。

尚、IEだけを信じて作っていくととんでもないサイトが出来上がってしまう場合が往々多々にしてあります。
IEだとちゃんと表示されているのに、他のブラウザで見ると、ぜんぜん崩れているとか。IEはけっこうちゃんと表記しなくてもうまく表示されてしまったりするんで。
出来るだけ、Firefox,Operaなど各種ブラウザも一緒に立ち上げて一つ一つ確認しながら作っていったほうがいいと思います。
それが出来ないようなら、テーブルで枠組みをしたほうが無難につくれるとは思いますが。

回答No.3

partita

＞ドリームウィーバーの編集画面上は・・・

DWの編集画面（デザインビュー）は、正しいレンダリングをしないことが結構ありますので、過信しないほうがいいです。提示された例の場合、IEの表示が正しいと思います。

私は、迷った時はブラウザを信用します。
（回答になっていなくてすみません）

お礼

ありがとうございます。

実際、DWとブラウザの表示が異なる場合が結構あり迷うことがあります。

なるべく両方が同じ表示になるように修正したりするのですが、どちらが正式なのか分らなくなるんですよね。

サイトを見てくれる閲覧者はDWの編集画面は見ないですから、IEの表示を信じればとりあえず問題ないですもんね。

本来なら各種ブラウザの表示を確認すべきなのでしょうが・・・まあ、閲覧者の殆どがIE6だろうから妥協しちゃおうなんて自分に言い聞かせています・・・いけませんね・・。

ありがとうございました。

回答No.2

crepon133

こういうことですか？

#page {
text-align:center;
}
.mainbox{
width:800px;
background-color: #ffeeee;
text-align:left;
margin: 0px auto 0px auto;
padding:0px;
}
.rightbox{
width:400px;
height:200px;
background-color: #666666;
float:right;
}
.leftbox{
width:300px;
height:100px;
background-color: #cccccc;
float:left;
}
.clear-both{
clear:both;
}

<div id="page">
<div class="mainbox">
<div class="rightbox">
右のスペース
</div>
<div class="leftbox">
左のスペース
</div>
<br class="clear-both">
</div>
</div>

お礼

ありがとうございます。
ずばりこの通りです。

中央定位、幅800pxの物を作成中に出くわした疑問でした。

<br class="">の使い方を知らなかったため、例えば下にフッターを作る以前の段階で今回の疑問が生じました。

実際にはこのままの形で作成するわけではないのですが、非常に参考になりました。
ありがとう御座います。