IE7でfloatしない原因

質問

css初心者です。
テキストの横に画像をフロートさせたいのですが、
IE７のみ、表示が崩れてしまいます。
原因を教えてください。

簡潔に必要な部分だけを書き出すと、
HTMLは以下のようになっています。

<div class="main">
<p class="float">テキスト1</p>
<img src="a.jpg" alt="A画像" width="100" height="10"class="a">
<img src="a.jpg" alt="B画像" width="100" height="10"class="b">
<p class="padding"><a href="index.html">テキスト２</a></p>
</div>

CSSは以下。

div.main {
width: 600px;
padding:15px;
}
.float{
float:left;
width:100px;
}
.a {
float:left;
padding-right:20px;
padding-bottom:5px;
}
.b {
clear:left;
padding-bottom:5px;
}
.padding{
padding-bottom:10px;
}

表現したいのは、
～～～～～～～～～～～～～～
テキスト１　A画像　B画像
テキスト２
～～～～～～～～～～～～～～
このようなレイアウトです。

IE８、Firefox、Chromeでは希望通りのレイアウトになっていますが、
IE７でみると、
～～～～～～～～～～～～～～
テキスト１　A画像
　B画像
テキスト２
～～～～～～～～～～～～～～
となっています。
また、画像が一つだけ（A画像だけ）のパターンもあるのですが、
この場合には
～～～～～～～～～～～～～～
テキスト１
　A画像
テキスト２
～～～～～～～～～～～～～～
となってしまいます。

A画像とB画像はまったく同じ大きさです。
padding-bottom指定は、各行の行間を開けたくて指定しています。

宜しくお願いします。

回答No.4

noname#158634 · ベストアンサー

補足読みました。

そうするとそもそもfloatいらないのでは？
とりあえず
<dl>
<dt>テキスト1 画像A 画像B</dt>
<dd>テキスト2</dd>
</dl>
とすると、内容とタグの対応がある程度きちんと取れたうえで質問者さんの希望するレイアウトに近くなります。ここから調整してはいかがでしょうか。

お礼

お礼コメが遅くなりました。

その後無事諸々の微調整も済み、該当部分は教えていただいた方法でばっちり解決、完成しました。
次々に問題にぶち当たるため、サイト完成の光はまだ遠すぎて見えませんが…（苦笑

一人で作業をしていると、
相談相手がいない。
何が間違っているのかわからないので、検索しようにも「何を」検索すればいいかわからない。
うまくそれっぽいものがヒットしても、難解で自分のスキルでは理解できない。
理解できていないから、アレンジもできない…。
など、堂々巡りの悶々状態に陥ってしまったりします。

わらにもすがる思いで初めて利用した「教えて！」でしたが、親切に教えていただき、嬉しかったです。
実際の問題の解決だけでなく、「悶々とした孤独感」からも解放してもらいました。
本当にありがとうございました。

今後も、頼りすぎない、でも、あまり悶々とするときは相談できる。
そんな場所としてここを利用していきたいと思います。
またうろついているのを見かけた際は、宜しくお願いします（＾＾*

※なんだか気付いたら小学生の日記みたいなコメになっちゃいました…（照

補足

みたびの回答、ありがとうございます。

実は回答待ちの間に色々試しており、
dlタグを使うところまでは辿り着いていたのですが、
惜しくも
<dl>
<dt>テキスト1</dt>
画像A 画像B
<dd>テキスト2</dd>
</dl>
と、こんな感じになっていました（＾＾；
画像もdtに含めれば、floatせずとも並ぶんですね！
（きっと基本中の基本なんでしょうが…私的に目からウロコでした！）

IE7での表示も問題なく、3日も悩みぬいた問題がアッサリ解決です。
こんなヘタレ初心者に最後までお付き合い頂き、本当にありがとうございました。

余談ですが、先の回答への補足で書いたように、
当初は正直、「ちゃんと見えてればソースなんてどうでもいいや」的な感覚だったんです。
元々テーブルでバカ長いソース平気で書いてましたし。
しかし、cssでやり始めると、なんというか、「片付ける快感」に目覚めますね（笑
cssを外部に書き出すのはもちろん、
jsも、例えばDWの自動生成ロールオーバーを使わずに外部ファイルを使ってソースをシンプルにしたり。
今回教わったプロパティーの指定方法のおかげで余計なclass指定もグッと減りました。
一行でもHTMLが短くなると、なんだか嬉しくてニヤリとしちゃいます（笑
今まで「どうでもいいや」と軽視していた、「web職人さんたちのこだわり」が
なんとなくですけど、ちょっとわかってきた気がします（笑

多分これからもおバカ質問を度々行うと思いますが、
その際にはまたよろしくお願いします（＾＾*

回答No.7

ORUKA1951

div.nav2 dl dt img{margin-left:10px;}
とかを追加してください。
なお、画像サイズはご自身のものに・・
　細かい位置調整もnav1,nav2とも可能です。
div.nav1 dl dt{position:relative;}
div.nav1 dl dt:after{position:absolute;top:5px;left;10px;}
とか・・
　HTMLは文書構造をもっとも表している要素でマークアップすること。それに基づいてスタイルシートを書く(デザインのためにHTMLに手出しをしない)ことを念頭において作成されると、良いでしょう。

お礼

さらにこちらにも。ペタっ。

いつも貴重なお時間を割いて丁寧に教えてくださり、ありがとうございます。

回答No.6

ORUKA1951

やっとこさ、何をしたいかがわかったような気がします。
日付と簡単な説明文の羅列ですね。ひょっとしてナビゲーションリンクのリストではないかと。
　もしそうなら、HTMLは、下記のようなもので良いでしょう。dt前のマージンはdd+dt(兄弟セレクタ)で指定してあります。
★タブは＿に置換してあります。

<h2>モダンブラウザ対応</h2>
<div class="nav1">
＿<dl>
＿＿<dt class="new">2011/12/04</dt>
＿＿<dd>テキストの横に画像をフロートさせたいのですが</dd>
＿＿<dt class="new recommend">2011/12/04</dt>
＿＿<dd>テキストの横に画像をフロートさせたいのですが、IE７のみ、表示が崩れてしまいます。</dd>
＿＿<dt class="recommend">2011/12/03</dt>
＿＿<dd>質問文でも書きましたが、一応、IE8、Firefox、Chromeでは望み通りのレイアウトになっています。IE7で見ると画像が下に落っこちてしまっています。</dd>
＿＿<dt>2011/12/02</dt>
＿＿<dd>質問文でも書きましたが、一応、IE8、Firefox、Chromeでは望み通りのレイアウトになっています。</dd>
＿＿<dd>IE7で見ると画像が下に落っこちてしまっています。<dd>
＿</dl>
</div>
<h2>古いブラウザIE7以前用</h2>
<div class="nav2">
＿<dl>
＿＿<dt class="new">2011/12/04<img src="images/new.gif" width="16" height="16" alt="(新着)"></dt>
＿＿<dd>テキストの横に画像をフロートさせたいのですが</dd>
＿＿<dt class="new recommend">2011/12/04<img src="images/new.gif" width="16" height="16" alt="(新着)"><img src="images/recommend.gif" width="16" height="16" alt="(お勧め)"></dt>
＿＿<dd>テキストの横に画像をフロートさせたいのですが、IE７のみ、表示が崩れてしまいます。</dd>
＿＿<dt class="recommend">2011/12/03<img src="images/new.gif" width="16" height="16" alt="(新着)"></dt>
＿＿<dd>質問文でも書きましたが、一応、IE8、Firefox、Chromeでは望み通りのレイアウトになっています。IE7で見ると画像が下に落っこちてしまっています。</dd>
＿＿<dt>2011/12/02</dt>
＿＿<dd>質問文でも書きましたが、一応、IE8、Firefox、Chromeでは望み通りのレイアウトになっています。</dd>
＿＿<dd>IE7で見ると画像が下に落っこちてしまっています。<dd>
＿</dl>
</div>
でもよいのですね。定義リストを使ってます。

スタイルシートは、極めて簡単で
div.nav1 dl{width:400px;}
div.nav1 dl dt{font-weight:bold;}
div.nav1 dl dd+dt{border-top:dotted 1px gray;margin-top:1em;}
div.nav1 dl dd{margin-left:1em;text-indent:1em;}
div.nav1 dl dt.new:after{content:" " url(images/new.gif);}
div.nav1 dl dt.recommend:after{content:" " url(images/recommend.gif);}
div.nav1 dl dt.new.recommend:after{content:" " url(images/new.gif) " " url(images/recommend.gif);}
<!-- old用 -->
div.nav2 dl{width:400px;}
div.nav2 dl dt{font-weight:bold;}
div.nav2 dl dd+dt{border-top:dotted 1px gray;margin-top:1em;}
div.nav2 dl dd{margin-left:1em;text-indent:1em;}

ですみます。
もちろん、googleお勧めのLynxブラウザでも意味が通じる。
google技術に関するガイドライン ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 )

お礼

こちらの回答にも、お礼のしるしをば、ペタリ。

補足

何度も回答いただき、ありがとうございます。
「極めて簡単」とおっしゃっていますが、ORUKA様の回答は私にはレベルが高く、理解できないことも多いもので、色々と頓珍漢な問答をしてしまい、申し訳ありませんでした。

今回出していただいた例は、:afterというのを使って画像をテキストの後に配しており、配する画像が行によって違うので、それに応じてクラス分けしているということですよね？
また、古いブラウザではうまくいかない（:afterが使えない？）ので、それ用に別途記述をし、そちらは先の回答者様と同様の指定方法…ということでしょうか？
う～ん。難しいです（＾＾；
私は:afterの存在すら知らなかったので感心するとともに、「簡単」とは仰るものの、ブラウザ別に指定を用意しなくてはいけないとなると、正直「うへぇ～、面倒！」と心折れそうです（苦笑

とりあえず今回は、後者の指定で作成し、新旧ブラウザ共に無事表示できたことを確認したので、それで行こうと思います。
本来なら新しい（＝正しい？）、スマートな方法を日々研究し、取り入れていくべきなんでしょうが、まだまだ私はその域には達せそうにないので…。

ORUKA様のせっかくの教えをフルに生かせないダメ質問者で申し訳ありません。
最後までお付き合いいただき、ありがとうございました。
また質問することもあるとは思いますが、これに懲りずに宜しくお願いします！

回答No.5

noname#158634

締め切られる前にひとつお節介。

＞<dl>
＞<dt>テキスト1</dt>
＞画像A 画像B
＞<dd>テキスト2</dd>
＞</dl>
これ、ダメ。なぜかというと「<dl>の中は<dt>と<dd>だけ」だから。つまり確かに「基本中の基本」ですね。
どのタグの内側にどんな要素が入っていいかというのは、「ブロック要素」と「インライン要素」という概念を含めぜひ覚えておくといいです。正しさだけでなくCSSでの見栄えの操作のしやすさという意味でも「より良いHTML」を掛けるようになります。

お礼

さらにこちらのコメにもペタっと。

これだと、一つの質問に同じ方から何度も回答いただいた際、同じ人に何度もお礼を言う形になって、スマートじゃないですね。
最初のコメント返しの時点で「補足」ではなく「お礼」を使うべきなんでしょうね。
で、お礼で言い忘れたことがあれば、「お礼の補足」として、「補足」を使う…と。
（ややこしいな…（＾＾；

次回からはそのようにします。
何はともあれ、色々とお世話になりました。

補足

最後までありがとうございます。
成程、全くの初心者的ミステイクで、全く「惜しく」なかったわけですね（苦笑
どうもまだこの意味付け（マークアップ）に慣れず、「画像は画像で、定義するほうでもされるほうでもないし、囲むのはおかしいか…？」みたいな安易な感覚でした（＾＾；
ルールの部分からしっかり覚えないといけませんが、どうも、この「<dl>の中は<dt>と<dd>だけ」というような、明確な「基本ルール」がまとまった書籍やサイトが見つからず、また、何をどこから覚えていいのかすらわからないため、結局「実践しながら、壁にぶち当たるたびに調べる」といったやり方になってしまっています。

今回、「ブロック要素」と「インライン要素」をまず学べという明確なご指示（笑）を頂きましたので、まずはそこから手掛けてみたいと思います。
手取り足取り教えていただき、本当にありがとうございました（＾＾＊

回答No.3

noname#158634

＞突込み
いえ、ただの原理主義的な屁理屈のお説教ですので、今回の本題とは関係ないからこのまま触れずにいきます。
というか、それをする人が予定通り来ましたから私からは不要でしょう(笑)

んで、カラム落ちではないということで失礼しました。まあ、画像の幅が書いてなかったので誤解は許してください。
＞テキスト１　A画像　B画像
＞テキスト２
この表現では実は伝わらない部分があります。ぶっちゃけ実際の位置関係、そして画像とテキストの関連性です。
なんとなく「テキスト１　A画像　B画像」で1行のつもりかとも思いましたがそうするとタグのつけ方がそれに見合ってない。#2が長々長々長々長々教えてくれているのは大まかにいうとその「見合ってない」の部分です。

今これを打ちながら気づきました。もしかして「テーブルレイアウトするな」を誤解してるのでは？
テーブルレイアウトがいけないと言われるのは、文字通り「レイアウト」に<table>を使うからであって、それが「表」としての意味合いを持つのであれば当然<table>が正統性を持ちます。
今気づいたことというのは、例示の部分は「説明文と説明画像」ではないかということです。何かの一連の手順や遷移を並べて説明するページはよくありますが、問題のHTMLの中身はそのようなものではないですか？もしそうであれば前述のようにむしろ<table>でやれということになります。

お礼

そういうわけで、こちらのコメにもペタペタと足跡をば。

補足

>この表現では実は伝わらない部分があります。ぶっちゃけ実際の位置関係、そして画像とテキストの関連性です。

成程。ようやくわかりました。
あまり抽象的な例にしてしまうとわからないんですね。

>なんとなく「テキスト１　A画像　B画像」で1行のつもりかとも思いましたがそうするとタグのつけ方がそれに見合ってない。

仰る通り、「一行のつもり」でした。
根本的にタグのつけ方がおかしいんですね…（苦笑

実際に作りたいのは、以下のようなものです。
テキスト1＝日付
文字数が決まっているため横幅指定可能（予定では横100px）。1行。
画像A、B＝「NEW」「おすすめ」など
縦幅の細い画像で、テキスト１と並べて一行のように見せたい。
画像と画像の間には隙間をあけたい。
画像が無いときや、一つだけの時もある。
テキスト2＝内容説明
文字数は決まっていない。長ければ外枠で折り返し2行になるようにしたい。

なお、上記で1セットで、次のセットとの間には点線が入ります。
点線は、html上で
<div class="dot_line"></div>
を入れ、CSSで
div.dot_line {
border-bottom-style: dotted;
margin-bottom:8px;
color:#CCCCCC;
}
としています。

質問文でも書きましたが、一応、IE8、Firefox、Chromeでは
望み通りのレイアウトになっています。
IE7で見ると画像が下に落っこちてしまっています。

今気付いたんですが、上記の場合、
ul,liでマークするとか、Blockquoteにするとかでしょうか？
体裁的には、テキスト1と2の頭は揃っており文字下げはしません。

テーブルについてですが、実は別の個所で簡単な表があるためテーブルを使用しているのですが、
divの中に入れたテーブルは、cellpaddingとかが効かなくないですか？
また、DWで作業すると、ボーダーや背景色など、諸々の指定がどんどんHTMLに書かれてしまうので、
それを一々cssに書き出したりするのがまた面倒で…（汗
100％テーブルレイアウトの時にはよく使う指定だったので、
色々な技（？）が封印されてしまうと結構厳しいです（＾＾；
実は当初、「正しい意味付けは後回しで、とりあえずきちんとレイアウト・表示されるのが優先。
最悪、レイアウトが難しい部分はテーブルでやっちゃえばいいや。」と、
いわゆる「ハイブリッドレイアウト」（？）で行こうと思っていたのですが、
上記の例のように、テーブルも思ったように使えないため、結局すべてcssで組んでおり、苦戦している次第です。

全く出来の悪い質問者で申し訳ありません（＞＜
引き続きアドバイスをお願いいたします。

回答No.2

ORUKA1951

「テキストの横に画像をフロートさせたいのですが、」
　通常はfloatは、画像の周囲に文字を回り込ませるために
■■■■　使用します。
■■■■□□□□　ブロックどおしを並べるためのものとは
■画像■□画像□　言えません。
■■■■□□□□　ブロックどおしを並べようとすると、そ
■■■■　のサイズが、横幅を超えるとそれも下側に落とさ
れます。
★ブロック要素・インライン要素は重要な概念です。floatを指定されると無条件でブロック要素とみなされます。

＞表現したいのは、
＞～～～～～～～～～～～～～～
＞テキスト１　A画像　B画像
＞テキスト２
＞～～～～～～～～～～～～～～
＞このようなレイアウトです。
　この部分の意図がわかりません。まったくfloatの必要すらないのではないかと思います。

　根本的な部分で思い違いをされているようです。
HTMLは文書構造をマークアップするもので、デザインをするものではありません。
それをスタイルシートでデザインするためには、HTMLがきちんとマークアップされていなければなりません。

　オーサリングツールは強力でマークアップやスタイルの設定に役立ちますが、あくまでHTMLやCSSをよく知っていることが必須です。それらを知らなくても使えると思ったら間違いです。

　どのような文書構造か質問やNo.1への補足を読ませていただいてもわからないので、推測でHTMLとCSSを示しておきます。
[HTML]
<div class="section"><!-- 本文記事を示します。-->
　<h1>見出し</h1><!-- 本文には原則として見出しがあります(表示するしないは別) -->
　<p>一つの段落が入ります。</p>
　<div class="figure"><!-- 挿絵 -->
　　<img src="a.jpg" width="102" height="64" alt="なんたら"><img src="b.jpg" width="102" height="64" alt="かんたら">
　　<!-- IMGは置換ライン要素なのでPにはさまれる場合ブラウザは匿名ブロックを生成しますが、本来はブロックで囲むべきです。-->
　</div>
　<p>段落・・次の段落が入ります。</p>
</div>
　HTMLは、これだけで良いです。テキストブラウザやスタイルシートがなくても意味が通じるように書きます。section,figureは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
に準じてclass名をつけるほうが良いです。このsection,figureは、HTML5の要素名を参考にしています。mainはともかく、wrapとかa、b、paddingのようなものはよくありません。第一、後日、自身が見直されてもわからないでしょう。当然検索エンジンにも伝わりません。こればっかりはオーサリングツールは読解力がないので著者が読み解きつけるしかありません。

この場合のCSSは、次のように簡単になります。
div.section{
　width:600px;
　/* paddingはここで指定しないほうが良いです。古いIEはpadding内辺を600pxにしないバグがあります */
}
div.section h1,div.section p{ /* 本文の子供のh1とpについてmarginを決めます。 */
　margin:15px;
}
div.section p{
　width:100px;
　float:left;
　clear:left;
}
div.section p+p{/*２段落目以降は段落間を開ける。詳細度[0,0,1,3] */
　margin-top:10px;
}
div.section div.figure{ /* 詳細度が[0,0,2,2]なので上の設定は上書きされる */
　margin-top:0;
}

CSS2.1のセレクタの基本は、出発なる要素名に続いてセレクタを続けるのが基本です。.figureは、*(全称セレクタ).figureとみなされてすべてのclassの値の配列にfigureを含むものに適用されてしまいます。タイプセレクタ(div)に続けて書くことで、p.figureには適用されなくなります。また、親を指定することで他の場所で誤って適用されることがなくなります。
[例]
div.header p strong{color:red;} /* 詳細度[0,0,1,3]
と書けば、本文中(<div class="section"></div>内の<strong>要素には適用されませんので、いちいちclass名を書く必要がありませんし、CSSのどこかで、p strong{color:green;}詳細度[0,0,0,2]と書いてあっても、div.header内のstrongのみ上書きされます。

　ごらんのように、CSSだけ見ても、
div.section{}本文の設定だな。
div.section h1,div.section p{}本文中の見出しと段落の設定
div.section p{}本文中の段落
div.section p+p{}２番以降の段落
div.section div.figure{}挿絵が入るブロック
と、数年後のあなただけでなく、誰が見てもどんな設定であるかわかるでしょう。

　いちど、HTML,CSSを基本を押さえて置かれることをお勧めします。スタイルを指定するためにclass名やidを追加する必要はないはずです。

お礼

お礼コメが遅くなり、申し訳ありません。
実は、こちらのサイトでは「頂いたコメごとにお礼を付けるのがマナー」というのについ先ほど気が付いたところです。
「補足」での返答で、すっかりお礼は済んでいるものと思ってしまっておりました（＾＾；

本当にありがとうございました！

補足

すみません。難しくて意味がいまひとつ…いや、正直全くわかりませんでした。
なんとか理解できた（？）のは、最後の２行だけでした。
一つ一つの要素に無暗にidやclassを付けてレイアウトを指定するのではなく、
大元の要素（この場合、<div class="section">）の中の、
この要素はこう、こっちの要素はこう、という風に指定するということですよね？
私の持っている本にはそのような指定の仕方がなかったため、
いちいち各要素にクラスを付けて指定してしまっていました。
少しずつ指定の仕方に慣れていこうと思います。
なお、クラス名などはご相談にあたり仮の名前を付けたもので、
実際は「news」「menu」など、実用的（？）な名称を使っています。

HTMLのマークアップについては、
一応ページ全体を通しては、それなりにやっている…つもりです。
h1タグやulタグなど、内容にあわせてマークしています。
今回のご相談は、その中の一部です。
（質問で書いたHTMLのもっと上のほうに、タイトルなどはあります）

とにもかくにも、まずはご提示いただいたHTMLとCSSを
参考に、チャレンジしてみました。
pに囲まれているimgはブロックにしないといけないというのは知りませんでした。
body内に直接imgを置く場合はpなどを使ってブロック化していましたが…。
勉強になります。
提示いただいたcssで、意味が理解できない部分がありましたので教えてください。
pにfloatとclearを同時指定していますが、
これはどういう意味（効果？）があるのでしょうか？
float:left;は、自身を左に寄せ、次に来る要素を右に回り込ませる
clear:left;は、右への回り込みを解除する
ではないのでしょうか？だとすると、共存できないはずの指定ですよね？
ちなみに、clear:left;を消しても、表示は変わらないように見えます。
clear:left;を指定する意味はなんでしょうか？

また、テキストの横に画像が来たものの、新たな問題が…。
sectionには背景色を適用したいのですが、
「次の段落…」の部分がsectionに内包されておらず、
枠外になってしまいます。
また、こちらは背景を設定するわけではないのでいいといえばいいのですが、
figureに背景を設定すると、「一つの段落が…」の部分も内包されてしまっています。
HTML上では、前者はdivに内包され、後者はdivの外にあるはずなのに、
なぜこのようになるのでしょうか？

遅ればせながら最近やっとテーブルレイアウトからcssレイアウトに移行しようとしています。
どうにもテーブル癖というか、「レイアウトありき」の感覚が抜けないのと、
float関連の理解が難しく、難航しています…。
特にテーブル時代には大幅に狂うことのなかった
「ブラウザによる見え方の違い」によるレイアウト崩れにはホトホトくじけそうです…（TT
あまりの初心者っぷりでイラッとするかもしれませんが、
どうか引き続き宜しくお願いいたします。

回答No.1

noname#158634

HTMLタグやCSSのプロパティのつけかたに付いての突込みは割愛します。

floatの挙動を把握してないのが原因です。
テキストと画像の要素の幅が外側のボックスの幅を超えた場合にそういうことになります。「画像1枚のとき」と勝手に誤解しているようですが、実際にその1枚はほかに比べ幅が大きいでしょう？
詳しくは「カラム落ち」で検索。

お礼

こちらのサイトでは、お礼は頂いたコメ毎につけるマナーなんですね。
プロフのお礼率の上がり方に疑問を持ち、今頃気づきました。
というわけで、取り返しのきくうちに、遅ればせながらのお礼巡業です（笑
ありがとうございました！

補足

実際の横幅サイズですが、
外側のボックス598px（余白15px）
テキストA100px
画像A、B共に102px
画像Aの右余白20px
ですので、画像を2枚入れる時も、
要素の横幅は
100＋102+20+102=324
で、外枠よりもかなり小さいです。
画像が一枚の時も使用する画像自体は同じですので、
その際の横幅は
100＋102=202px
です。

つまり、どちらの場合も外枠よりかなり幅は小さいです。
「カラム落ち」も調べてみましたが、
「要素が外枠より大きくなった場合」に該当しないので
参考になりそうな記事に巡り合えません。
上記サイズである前提で、再度アドバイスいただけますと助かります。

なお、割愛された「プロパティのつけかたに付いての突込み」
についても気になります。
何かおかしかったでしょうか？（汗
DWのCS5を使っており、一応CS5用の初心者本（？）を見ながら
その通りにやったつもりなのですが…。
お時間があれば「突っ込んで」頂けると嬉しいです（＾＾；