入れ子にしたfloatのclear

Question

初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。そこで、1つ目のブロックの後にclearを摘要（
などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。

steel_gray · Accepted Answer

前回の回答
> 「詳細度」の高い部分(*1)で2つ目のブロックに「clear:left」を指定
はまちがいでいした。すいません。

float(left)したブロックは包括ブロック（の左辺）を超えてはならないという規則がありますが、clearは例外になると明記さているのでfloatよるレイアウトの限界だと思います。


意図とは異なるような気もしますが、
menuブロックの高さが常にcontentsブロックの高さより低いと決められるのであればabsoluteを利用して配置する事はできそうです。

#main{
position:relative;/*追加*/
}
#menu{
/*float: left; 削除*/
position:absolute;/*追加*/
}
.data{
clear:left;/*追加*/
}

参考URL：http://www.y-adagio.com/public/standards/tr_css2/visuren.html#flow-control

steel_gray · Answer

#3について。
ごめんなさいです。IEでの確認してませんでした。何かバグに触れてしまったようです。
別に幅の指定は必要ではないです。#3もfirefoxやoperaでは問題ないです。
ですが、状況によっては指定する事でうまくいくのかもしれませんね。

nuruhho44 · Answer

#4です。全然的外れなことかもしれませんが、以下は私が以前やった方法です。役に立たなかったらごめんなさい。

スクリプトはコンテンツ内の各ブロックに適当に文字を放り込むためのものです。判り易いように各ブロックに背景色を入れてあります。これの問題は『MANU』ブロックの高さより『CONTENTS』ブロックの高さが低い場合は、『FOOTER』が『MANU』に重なるということですね。

steel_gray · Answer

補足。
対応しているブラウザがないようなのが残念ですが、御希望のようなレイアウトは実はフロートよりもcompactボックスが適しているのではないかと思います。
→参考URL

#menu ,.left_data{
display:compact;
/*float:left; floatはさせずに、右側に置きたいブロックのマージンの中に配置*/
:
:
}

参考URL：http://www.y-adagio.com/public/standards/tr_css2/visuren.html#compact

nuruhho44 · Answer

floatを使ってレイアウトすると、ブラウザによる違いが大きく、なかなかうまくいきませんよね。

並べるブロックの高さが違うと回り込みされてしまいますので、ブロックの高さを統一してみてはいかがでしょうか。

但しheightの指定値は、文字サイズに比例するemやらexを使います。それによって完璧とは行きませんが、文字サイズの変更による崩れはかなり抑えられると思います。

これはabsoluteを使ったレイアウトでも同じです。

しかしem値やex値はブラウザによって解釈が違っているようで、空白部分が大きくなってマヌケなデザインになりかねません。

窮余の一策としては、ＩＥとそれ以外のブラウザによって指定値を変える方法があります。（知ってたらごめんなさい）

div  { width : 400px; _width : 420px; }

という風にすると、ＩＥでは後で指定したアンダーバー付きの指定が有効となり幅420px、その他ではアンダーバー付きは解釈されず幅400pxとなります。
ちなみに記号はアンダーバー以外でもいいみたいです。

floatのいいところはブラウザの表示幅によって勝手に折り返してくれるので、表示幅に合わせた段組が可能となるところで、これはtableでは無理です。

最近作ったHPで、なんとかfloatで内容量の異なるブロックを段組みすることはできたのですが、商用サイトということで、表示の不安定さに限界を感じて最後はやむなくtableを使いました。残念！！

steel_gray · Answer

話題がずれますがabsoluteを利用しての配置について。
前回回答での利用の仕方においては先に挙げた制約以外はリキッドレイアウト、文字サイズ変更とも問題ないはずです。
回答どおりで positionはabsoluteにしますが、topやleft等の指定は不要です。（あえて書くならtop:0;left:0;になりますので。）

steel_gray · Answer

「詳細度」の高い部分(*1)で2つ目のブロックに「clear:left」を指定してみては？

> 文章ではうまく表現できずわかりにくいかもしれません?が、
現状のコード(htmlとcss)を単純化したモデルを記述してもらえると、回答する方も検証できるかと。

*1:他のCSSがhead部に書かれているなら、インライン(style属性)で。

入れ子にしたfloatのclear

前回の回答

#3について。

#4です。

この回答への補足

補足。

floatを使ってレイアウトすると、ブラウザによる違いが大きく、なかなかうまくいきませんよね。

話題がずれますがabsoluteを利用しての配置について。

「詳細度」の高い部分(*1)で2つ目のブロックに「clear:left」を指定してみては？

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング