CSSレイアウトの回り込みについて

質問

初めまして、よろしくお願いいたします。

見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。

■CSS

#wrapper {
width : 620px;
}

#left {
width : 300px;
float : left;
}

#right {
width : 300px;
float : right;
}

■ソース

<div id="wrapper">

<div id="left">
（左寄せブロック）
</div>

<div id="right">
（右寄せブロック）
</div>

</div>

上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。

この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。

右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので）

また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。

右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。

回答No.3

xenotactic · ベストアンサー

検索しましたが、こちらのサイトがきっと参考になるはずです。
floatの扱いは難しく、誰でも初めは大変だと思います。
がんばって習得してください。
http://www.geocities.jp/multi_column/float/07.html

お礼

大変わかりやすいサイトをご紹介くださいまして、誠にありがとうございます。

ご紹介くださったページにある"いわゆる「カラム落ち」を防ぐには"の項は、まさに私が知りたかった内容です。

これで気をつけるべきことがわかり、本当に助かりました^^感謝します。ありがとうございました。

回答No.2

xenotactic

overflow:hidden;とか。

お礼

アドバイス誠にありがとうございます。

早速overflowについて調べてみましたが、かなり参考になりました。
試してみようと思います。ありがとうございました。

回答No.1

ICHI-yan

出されているソースだけでは、説明のような事はアドバイスし切れません。
宣言も含めた最低限の事態が実現できるソースと、対象ブラウザを教えてもらえますか？入れる文字は日本語ですよね？まさか実験だからと、aaaaaaaaaaaaaaaaなんてやってませんよね？

お礼

ご回答本当にありがとうございます。

先ほど、質問の例に挙げているCSSとソースでもう一度テストしてみたのですが、問題の現象は起こりませんでした・・

入れる文字は日本語です。

対象ブラウザというか、私はいつもInternet Explorer6および、Firefox、Opera、Sleipnir（この3ブラウザは今年の5月時点の最新バージョン）の合計４ブラウザにて実際にチェックしながら、レイアウト崩れが起こらないCSSレイアウトのサイトを制作しています。

質問に書いているCSSとソースなら問題が起こらなかったことで、このCSSとソース自体に直接的な原因があるのではなく、問題の原因は別にあるということを再確認いたしました。

すみません、もう一度よくチェックしてみます。誠に申し訳ございませんでした。