floatを使ったデザインについて

質問

CSSで、左側にメニュー・右側にメイン記事、という
設定にしたいのですが(ブログではありません)、うまく行きません。

以下の状態で、IE6.0では思い通りに左右に分かれてくれるのですが、
FireFoxの場合に
右カラムの.midashiで指定したグリーンの背景色が、左カラムの左端から始まってしまい、
文字は.midashi、.text共々「画像に回り込むテキスト」のように
左のメニューが終わったところで左カラムの左端から始まります。

#right_textに、margin-right:0px;、margin-left:auto;と付け加えると
FireFoxでも予定通り、左右がキレイに分かれてくれるのですが
本来、こうするものなのでしょうか？
ブログのカスタマイズもしたことがあるのですが、
http://allabout.co.jp/internet/hpcreate/closeup/CU20050228A/index3.htm
この通りなら、こんな風にしなくても大丈夫ですよね？

いつもテキストエディタで入力しているので
素人ながらに色々とチェックはしたのですが(スペルミス・ブラウザ間のpadding合わせなど)
基本的なことが間違っていないか、御教授ください。

［HTMLソース］
<div id="frame">

<div id="left_text">
(中略)
</div>

<div id="right_text">
<div class="midashi">
らりるれろ
</div>
<div class="text">
ああああああ<br>
いいいいいい<br>
</div>
</div>

</div>

［CSSソース］

#frame {
width : 660px;
background-color : #F0F0F0;
}

#left_text {
width : 150px;
float: left;
padding-left: 10px;
padding-right : 10px;
}
(#left_text内の細かい部分は省略)

#right_text {
width : 470px;
padding-left: 10px;
padding-right : 10px;
}

.midashi {
font-size:20px;
background-color: #b3c716;
width : 470px;
}

.text {
line-height: 170%;
font-size: 15px;
width : 470px;
}

回答No.1

noname#23734 · ベストアンサー

それで良いと思いますよ。
確かfloat:leftが指定された要素に続く要素がNormal flowの場合は、float:leftが指定された要素が作るブロックのパディング左上と続く要素が作るマージン左上が重なるようになると思いました。
そして続く要素の行ボックスはfloat:leftが指定された要素の幅分幅を縮めて親ブロック上パディングから順番に並べられその高さがfloat:leftが指定された要素の高さを越えると親ブロックの幅になると思います。

でも続く要素にfloatが指定されているとそのようにならず続く要素は指定された方向に寄せられるのだと思いました。
そしてある要素の子供要素の全てにfloatが指定されているとその要素が作るボックスの高さは0になるのだと記憶しております。

そのように考えると正しい表示だと思えませんかね。
#right_text にmargin-left:150pxを入れると一見希望通りに表示されると思います。
でも、#right_text にpaddingが指定されているのに、.text と#right_text が同じ幅ってのがスッキリしませんけど、margin-right:0pxもありだとおもいますね。

お礼

丁寧な御回答、ありがとうございました。
回答を読ませて頂いて、自分の考えと1から比較しつつもう一度調べたところ、
floatの解釈に、先入観、思い違いがあったことがわかりました。
左右のカラムに分ける時に、左カラムにfloat:leftを、右カラムにfloat:rightを使う方法も
あったと覚えています。右カラムにmargin-right:0px left:autoを使う方法と
どちらが理にかなっているのでしょうか？
重ねて質問になってしまってすみません。

回答No.4

quads

#frame のボックスを用いて表現したいことがあるかによって多少完成形が異なります。

指定方法の違いについて、その妥当性に関する差異はあまりないように思われます。

こちらの内容は既に認識されているでしょうか。
http://www.geocities.jp/multi_column/

お礼

臨機応変に対応していかなければならないということを、今回の質問で痛切に感じました。

解りやすいサイトを教えてくださってありがとうございます。
ずっとこういう解りやすいレイアウトの説明をされているサイトを探していました。
よく読んで勉強致します。ありがとうございました！

回答No.3

noname#23734

>どちらが理にかなっているのでしょうか？
正直、これについては私にはなんとも言えません。
CSSの仕様書にもブラウザの振るまいについてのあるべき姿のようなことは書かれているようですが、スタイルシートの書き方に付いては特にこうあるべきと言うことは書かれていません。
私もこの質問を拝見させて頂いてこの方法もアリかなと思ったしだいです。
でもこの方法って意外と使われていないですよね。

前の回答でも書きましたがfloat:left,rightの組み合わせでは#frameの高さが0になるので色分けなどをすると少々不都合が出るし、margin-leftを使うとIEで見たときに#right_text内の行ボックスに微妙な（3px程度）違和感が出ます。

margin-right:0pxでこの違和感が出なく#right_textの内容が充分にあるのなら意外と理想的ではないでしょうか。

お礼

再びありがとうございます。「こうあるべき」というのが無いのですね。
自由に出来そうな分、自分の思っている表現が出来ていても、実は正しくないんじゃないかな、と思ってしまいます。
でも大丈夫と解ってホッとしました。

width:150pxのご指摘の方も、ありがとうございました。

回答No.2

grizzlycat

一般的には#1さんのおっしゃるように#right_textに左マージンを付けるか、
#right_textに[float: right;]を与えてボックス配置を明確に分けてしまえば後々メンテがしやすいと思います。

ただ[float: right;]を追加するとコンテンツが全てfloatになってしまい一番大きなくくりである#frameの背景色がFirefoxなどでは適用されない(本来はこれが正しい)ので、
どうしてもその背景色を適用したいのであればbodyに指定するか、
別途フッターなどでfloatを解除する[clear: both;]等の記述を追記する必要があります。

floatでの段組はいろいろサンプルになるサイトも多いのでそれらを参考にしてカスタマイズしながら覚える(技を盗む)のが一番だと思います。

分かりにくい説明で申し訳ございません、至らぬところ等ございましたら補足願います

お礼

#1さんの説明で概要は解ったような気がしていましたが、全部を心得てはいなかったようで、
先ほど試してみた時に仰るとおり背景色が適用されず、#2さんの文章を読んでなるほどと思った次第です。
解りやすい説明、ありがとうございました。